Angular-JS ng-repeat Directive
Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a number of times or once per item in a collection of items. ng-repeat is mostly used on arrays and objects.
ng-repeat is similar to a loop that we have in C, C++ or other languages but technically it instantiates a template(normally a set of HTML structures) for each element in a collection that we are accessing. Angular maintains a $index variable as a key to the element which is currently being accessed and a user can also access this variable.
Syntax :
<div ng-repeat="keyName in MyObjectName "> {{keyName}} </div>
Here “MyObjectName” is a collection that can be an object or an array and you can access each value inside it using a “keyName”.
Example 1
- Create an app.js file for the app.
var
app = angular.module(
'myApp'
,[]);
app.controller(
'MainCtrl'
,
function
($scope){
$scope.names = [
'Adam'
,
'Steve'
,
'George'
,
'James'
,
'Armin'
];
console.log($scope.names);
});
Line 1- Created an app module named “myApp” with no dependencies.
Line 3- Main controller for our application.
Line 4- Array of strings “names”. -
Create index.html page
<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
title
>Angular ng-repeat</
title
>
<
script
> type="text/javascript" src="jquery-3.2.1.min.js">
</
script
>
<
script
> type="text/javascript" src="angular.js"></
script
>
<
script
> type="text/javascript" src="app.js"></
script
>
</
head
>
<
body
ng-controller
=
"MainCtrl"
>
<
h2
>Here is the name list</
h2
>
<
ul
>
<
li
ng-repeat
=
"name in names"
>
{{name}}
</
li
>
</
ul
>
</
body
>
</
html
>
Line 5- Include all the dependencies like jquery, angular-js and app.js file
Line 12- Use ng-repeat directive to get one name from names array at a time and display it. -
Output :
- Example 2
- app.js file
var
app = angular.module(
'myApp'
,[]);
app.controller(
'MainCtrl'
,
function
($scope){
$scope.strings= [
'Beginner'
,
'For'
,
'Beginner'
];
console.log($scope.strings);
});
- We have a list of three strings.
index.html
<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
title
>Angular ng-repeat</
title
>
<
script
> type="text/javascript" src="jquery-3.2.1.min.js">
</
script
>
<
script
> type="text/javascript" src="angular.js"></
script
>
<
script
> type="text/javascript" src="app.js"></
script
>
</
head
>
<
body
ng-controller
=
"MainCtrl"
>
<
h2
>Here is the string list</
h2
>
<
ul
>
<
li
ng-repeat="s in strings>
{{name}}
</
li
>
</
ul
>
</
body
>
</
html
>
Note-“track by $index” is used here because there are duplicate entries in our list i.e. “Beginner”. Duplicate keys are not allowed because AngularJS uses keys to associate DOM nodes with items. “track by $index”, will cause the items to be keyed by their position in the array instead of their value
- Output :
- ng-repeat can be used to iterate through an array which requires less lines of code than the usual javascript method.
- Filters can be used with ng-repeat to create an easy to implement search bar.
- https://angularjs.org/
- https://docs.angularjs.org/api/ng/directive/ngRepeat
- https://docs.angularjs.org/error/ngRepeat/dupes
Applications:
References