ng-repeat directive used to print the repeated html content like if you want to print array values(this is just similar to loop statement of other languages).For example: we have an array of Employee names say emp=["Cavell", "Chavez", "Chapman", "Chandler"], Now to print these employee names in the html page without ng-repeat directive we have to do something like this.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
Employee Names are : <br />
{{employees[0]}}<br />
{{employees[1]}}<br />
{{employees[2]}}<br />
{{employees[3]}}
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.employees = ["Cavell", "Chavez", "Chapman", "Chandler"];
});
</script>
</body>
</html>
But this is not preferable as if you have number of employees like 100 or 1000. Now lets see the same example with the Angular JS ng-repeat directive .
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
Employee Names are :
<div ng-repeat="emp in employees">
{{emp}}
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.employees = ["Clancy", "Copland", "Crockett", "Darrow"];
});
</script>
</body>
</html>
The {{ emp }} will take one by one item from the employees collection and print it.
Lets understand another example of ng-repeat with collection of array of objects.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<div ng-repeat="emp in employees">
<div>Name : {{emp.name}} Age : {{emp.age}}</div>
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.employees = [{ name: "Day", age: "25" },
{ name: "Dickinson", age: "34" },
{ name: "Domeyko", age: "27" },
{ name: "Echols", age: "25" }];
});
</script>
</body>
</html>
The {{ emp }} hold employee at Zero Index when ng-repeat execute first time and with the help of dot ( . ) we can access the properties "name" and "age" of record. This way it will print the name and age of all employees.
ng-repeat has some special properties which gives values at each iteration and are very useful. Properties are :
$index - it will gives Index of the current record from the collection.
$first - $first is true if it is first iteration means ng-repeat executes first time.
$middle - $middle is true if ng-repeat executes the iteration except first and last.
$last - $last is true if it is last iteration.
$even - $even is true if the executed iteration is even means $index is even otherwise it is false.
$odd - $odd is true if the executed iteration is odd means $index is odd otherwise it is false.
Lets see example of these properties.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<div ng-repeat="emp in employees">
<div>Name : {{emp.name}} Age : {{emp.age}}</div>
<div>Index : {{$index}}</div>
<div>First : {{$first}}</div>
<div>Middle : {{$middle}}</div>
<div>Last : {{$last}}</div>
<div>Even : {{$even}}</div>
<div>Odd : {{$odd}}</div>
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.employees = [{ name: "Bogart", age: "25" },
{ name: "Watson", age: "34" },
{ name: "Browne", age: "27" },
{ name: "Broun", age: "25" }];
});
</script>
</body>
</html>
In the output see the value of $index for the first record it is zero, 1 for second,2 for third and so on.
Value of $first is true for first record and false for all other records.
Value of $middle is false only for first record and last record and for all other middle records it is true.
Value of $last is true only for last record and false for all other records.
Value of $even is true for even records.
Value of $odd is true for odd records.
If there is duplicate values in the ng-repeat collection then by default ng-repeat directive will not print anything because mapping is not possible if there are duplicate values in the collection. If you need to print duplicate values then you can track the items by $index. Lets understand with example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<div ng-repeat="emp in employees">
{{emp}}
</div>
<div ng-repeat="emp in employees track by $index">
{{emp}}
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.employees = ["Ehrlich", "Epictetus", "Favre", "Ehrlich"];
});
</script>
</body>
</html>
If you use ng-repeat directive without track by like this then it will not print employee names because in the employee array “Ehrlich” name is two times means the duplicate value exist. If you want to print duplicate values as it is in the collection then track it by $index, it will print the employee names as it is in the collection.
The range of ng-repeat directive is only in between the html tag on which we define the ng-repeat directive. If you try to use {{ emp }} outside the div element then it will not print anything because its range is in between the div element. To extend the range of ng-repeat we have to use ng-repeat-start and ng-repeat-end directives. Ng-repeat-start directive is same as the ng-repeat directive but it will repeat all the html up to the element on which we define ng-repeat-end directive. For more clarification lets see the example of ng-repeat-start and ng-repeat-end directives.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<div ng-repeat-start="emp in employees">
Name : {{emp.name}} Age : {{emp.age}}
</div>
<div>
{{emp.name}}
</div>
<div ng-repeat-end>
{{emp.age}}
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.employees = [{ name: "Ferguson", age: "25" },
{ name: "Gaiman", age: "34" },
{ name: "Garland", age: "27" },
{ name: "Khomeini", age: "25" }];
});
</script>
</body>
</html>
We define ng-repeat-start directive on the div element and print name and age of the employees , now the range of {{ emp }} not only in the div element but also outside this div element, see we use {{ emp.name }} in the another div element and it will print the name if you try this example. After this we define ng-repeat-end on another div element and print {{ emp.age }}. If you try to print {{ emp }} after ng-repeat-end it will not print anything, In between start and end points you can use {{ emp }} as many times as you want.
Using ng-repeat directive lets show the data in the table form.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.phoneNumber}}</td>
<td><button class="btn btn-primary btn-xs">Edit</button> <button class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var app = angular.module('sampleApplication', []);
app.controller('sampleController', function ($scope) {
$scope.employees = [{ name: "Carroll", age: "25", phoneNumber: "563544466" },
{ name: "Watson", age: "34", phoneNumber: "657865856" },
{ name: "Bryson", age: "27", phoneNumber: "679423435" },
{ name: "Carlin", age: "25", phoneNumber: "343667789" }];
});
</script>
</body>
</html>
Ng-repeat directive define on the tr tag to repeat the tr and print the data for each employee in the td tag. In the gray boxes I use some bootstrap classes for good UI. You can remove these classes or can read about these classes http://www.getbootstrap.com here. The output for this ng-repeat is like this:
The ng-options directive used to generate list of options dynamically for the select element using the array of objects . We can also use ng-repeat directive to draw the list of options but the ng-options directive is more fast than the ng-repeat directive. The selected option from the select list bound to the ng-model directive. Lets see the very simple example of ng-options directive.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<select ng-model="empName" ng-options="emp.name as emp.name for emp in employees"></select>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function ($scope) {
$scope.employees = [{ name: "Kingsley", age: "25", phoneNumber: "563544466" },
{ name: "Knuth", age: "34", phoneNumber: "657865856" },
{ name: "Mullally", age: "27", phoneNumber: "679423435" },
{ name: "Pasteur", age: "25", phoneNumber: "343667789" }];
});
</script>
</body>
</html>
In the example {{ emp }} will hold item one by one and {{ emp.name }} is for display the name of the employee , we can also display some other property like age or phoneNumber. The selected value will bind to the empName. Lets see another example for ng-options directive.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<select ng-model="empId" ng-options="emp.id as emp.name for emp in employees"></select>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function ($scope) {
$scope.employees = [{ name: "Valenti", age: "25", phoneNumber: "563544466" },
{ id: 1, name: "Wilcox", age: "34", phoneNumber: "657865856" },
{ id: 2, name: "Yutang", age: "27", phoneNumber: "679423435" },
{ id: 3, name: "Kraus", age: "25", phoneNumber: "343667789" }];
});
</script>
</body>
</html>
The basic need when we use select list in projects is that we have to show the text field in the select list as here the text field is employee name and at the backend we need to store the id for the selected option. In the above example we bind the empId with the ng-model. "emp.id as emp.name" side means in the backend we store the id but browser side we can not shows the ids in the select list as no one knows that which id is used for which employee :) so we have to show the employee names in the UI side. For this purpose we use ng-option loop like this emp.id as emp.name. Now if you print the {{ empId }} which is bind with ng-model you will get the id of the selected employee instead of employee name.
The ng-if directive same as the ng-show directive but the ng-show directive just hide the html from the DOM if false value assigned to it but in the case of ng-if it remove the portion of the html from the DOM and if true value assigned to it then again recreates the html portion in the DOM. The ng-show only change the visibilty but ng-if completely remove or reinsert the html portion to the DOM. Lets understand with an example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<input type="checkbox" ng-init="checked = true" ng-model="checked" />
<div ng-if="checked">I am displayed when checkbox is checked</div>
</div>
</body>
</html>
In the example initial value of checked variable is true(in ng-init) and so true is assigned to the ng-if so the div element displayed but as we uncheck the checkbox the value of checked variable set to false and this div element remove from the DOM and when again we checked the checkbox ng-if again insert the clone of this div element to the DOM and again this div wll be displayed.
ng-switch directive used to show the nested element conditionally. The ng-switch-when directive match the nested element and if no value matched then the content in the ng-switch-default directive displayed. ng-switch directive simply change the visibility of the nested element.
Lets see very simple example of the ng-switch directive :
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
<select ng-model="item" ng-options="item for item in items"></select>
<div ng-switch="item">
<div ng-switch-when="Textbox">
<input type="text" />
</div>
<div ng-switch-when="Numeric">
<input type="number" />
</div>
<div ng-switch-when="Dropdown">
<select><option>Sample 1</option><option>Sample 2</option></select>
</div>
<div ng-switch-default>
This is default Content
</div>
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.items = ["Textbox", "Numeric", "Dropdown"];
});
</script>
</body>
</html>
Item is assigned to the ng-switch directive whose value changed when the value of the select list changed. When value of the item is “Textbox” then first condition matched and the textbox in this div element will be displayed. Same for the “Numeric” and “Dropdown” values. If no value matched then content in the ng-switch-default(This is default Content) will be displayed.