Users Online
· Members Online: 0
· Total Members: 188
· Newest Member: meenachowdary055
Forum Threads
Latest Articles
Articles Hierarchy
#0005 AngularJS ng-repeat Directive with Example
AngularJS ng-repeat Directive with Example
Displaying repeated information
Sometimes we may be required to display a list of items in the view, so the question is that how can we display a list of items defined in our controller onto our view page.
Angular provides a directive called "ng-repeat" which can be used to display repeating values defined in our controller.
Let's look at an example of how we can achieve this.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
{{tpname.name}}
</li></ul>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.TopicNames =[
{name: "What controller do from Angular's perspective"},
{name: "Controller Methods"},
{name: "Building a basic controller"}];
});
</script>
</body>
</html>
Code Explanation:
- In the controller, we first define our array of list items which we want to define in the view. Over here we have defined an array called "TopicNames" which contains three items. Each item consists of a name-value pair.
- The array of TopicsNames is then added to a member variable called "topics" and attached to our scope object.
- We are using the HTML tags of <ul>(Unordered List) and <li>(List Item) to display the list of items in our array. We then use the ng-repeat directive for going through each and every item in our array. The word "tpname" is a variable which is used to point to each item in the array topics.TopicNames.
- In this, we will display the value of each array item.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. You will see all items of the array (Basically the TopicNames in topics) displayed.
Output:
Angularjs Multiple Controllers
An advanced controller example would be the concept of having multiple controllers in an angular JS application.
You might want to define multiple controllers to separate different business logic functions. Earlier we mentioned about having different methods in a controller in which one method had separate functionality for addition and subtraction of numbers. Well, you can have multiple controllers to have a more advanced separation of logic. For example, you can have one controller which does just operations on numbers and the other which does operations on strings.
Let's look at an example of how we can define multiple controllers in an angular.JS application.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp">
<div ng-controller="firstcontroller">
<div ng-controller="secondcontroller">
{{lname}}
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('firstcontroller', function($scope){
$scope.pname="firstcontroller";
});
app.controller('secondcontroller', function($scope){
$scope.lname="secondcontroller";
});
</script>
</body>
</html>
Code Explanation:
- Here we are defining 2 controllers called "firstController" and "secondController". For each controller we are also adding some code for processing. In our firstController , we attach a variable called "pname" which has the value "firstController", and in the secondController we attach a variable called "lname" which has the value "secondController".
- In the view, we are accessing both controllers and using the member variable from the second controller.
If the code is executed successfully, the following Output will be shown when you run your code in the browser. You will see all text of "secondController" as expected.
Output:
Summary
- The ng-repeater directive can be used to display multiple repeating items.
- We also had a look at an advanced controller which looked at the definition of multiple controllers in an application.
