ng-repeat in angular JS is a directive that which has to be used in the HTML tag.The main purpose of this directive is to repeat the concern tag for number of times. I can say it as just like foreach loop mechanism.
By using ng-repeat directive we can create the collection of data with certain tag(li,p,td...e.t.c) that what we want to render on the page.
ng-repeat directive can hold or loop the data of type array or an object.
sample look :
<li ng-repeat="x in collection"> {{x}} </li>
In the above tag <li> I used the attribute or directive ng-repeat with an expression "x in collection", Here Collection is nothing but our data either an array or object and x is a variable that which holds data from the collection.We can use the 'x' variable to display the data. The ng-repeat directive will repeat or render the tag <li> as far as the length of collection.
Example with array in ng-repeat :
<script type="text/javascript">
var myapp = angular.module('myApp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.deptnames = ['Developer', 'Architect', 'Tester'];
}]);
</script>
In the above JS code, I had attached "deptnames" array to the $scope as a collection.
<body ng-app="myApp" ng-controller="ctrlr">
<ul>
<li ng-repeat="x in deptnames">{{x}}</li>
</ul>
</body>
In the above view code, I used the ng-repeat directive to the <li> tag.
Result will be as like follows :
Now lets look an example with object as collection :
<script type="text/javascript">
var myapp = angular.module('myApp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.deptdetails= [
{dept:"Sales", depthead:'Giri'},
{ dept: "Testing", depthead: "Hari" },
{ dept: "Architect", depthead: "Ravi" },
{ dept: "Developer", depthead: "Naveen" }
]
}]);
</script>
In the above script, I had taken the object deptdetails to $scope which contains the list of department names it's head as "dept" and "depthead".
View Code :
<body ng-app="myApp" ng-controller="ctrlr">
<ul>
<li ng-repeat="x in deptdetails">{{x.dept}} - {{x.depthead}}</li>
</ul>
</body>
In the above view code I had given the expression as "x in deptdetails" for every loop of deptdetails object it will pull out the data to the variable "x" and by using this variable we can access its properties as like "x.dept" and "x.depthead"
Result :
If the requirement is like getting the each property to each row, then we have to follow the below syntax:
<li ng-repeat="(key,value) in collection"> {{key}} - {{value}} </li>
Sample Look afor above scenerio :
<script type="text/javascript">
var myapp = angular.module('myApp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.empobj = {
"Name": "Kiran",
"Role": "Developer",
"Location": "Banglore"
}
}]);
</script>
In the above script, we are having "empobj" object with properties name,role and location. Now if we want each property to its individual set of behaviour the code looks as like below :
<body ng-app="myApp" ng-controller="ctrlr">
<ul>
<li ng-repeat="(x,y) in empobj">{{x}} - {{y}}</li>
</ul>
</body>
In the above code, we can see "x" was set as "key" and "y" was like "value".
Result :
Duplictes problem with Track by solution :
In ng-repeat if our data contains any duplicates then it causes to the creation of the exception.
Sample of duplicate : <li ng-repeat="x in ['Ravi','Ravi','Hari']">{{x}}</li>
If we observe in the place of collection I declared an array with naming 'Ravi' as multiple times which leads to duplicate exception. It generates an error as like follows :
If we take a keen eye on the above image in the first statement itself it asks us to use the "track by" expression for maintaining the uniqueness.
Usig track by to our expression :
<li ng-repeat="x in ['Ravi','Ravi','Hari'] track by $index">{{x}}</li>
Results without exception like below :
By using ng-repeat directive we can create the collection of data with certain tag(li,p,td...e.t.c) that what we want to render on the page.
ng-repeat directive can hold or loop the data of type array or an object.
sample look :
<li ng-repeat="x in collection"> {{x}} </li>
In the above tag <li> I used the attribute or directive ng-repeat with an expression "x in collection", Here Collection is nothing but our data either an array or object and x is a variable that which holds data from the collection.We can use the 'x' variable to display the data. The ng-repeat directive will repeat or render the tag <li> as far as the length of collection.
Example with array in ng-repeat :
<script type="text/javascript">
var myapp = angular.module('myApp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.deptnames = ['Developer', 'Architect', 'Tester'];
}]);
</script>
In the above JS code, I had attached "deptnames" array to the $scope as a collection.
<body ng-app="myApp" ng-controller="ctrlr">
<ul>
<li ng-repeat="x in deptnames">{{x}}</li>
</ul>
</body>
In the above view code, I used the ng-repeat directive to the <li> tag.
Result will be as like follows :
Now lets look an example with object as collection :
<script type="text/javascript">
var myapp = angular.module('myApp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.deptdetails= [
{dept:"Sales", depthead:'Giri'},
{ dept: "Testing", depthead: "Hari" },
{ dept: "Architect", depthead: "Ravi" },
{ dept: "Developer", depthead: "Naveen" }
]
}]);
</script>
In the above script, I had taken the object deptdetails to $scope which contains the list of department names it's head as "dept" and "depthead".
View Code :
<body ng-app="myApp" ng-controller="ctrlr">
<ul>
<li ng-repeat="x in deptdetails">{{x.dept}} - {{x.depthead}}</li>
</ul>
</body>
In the above view code I had given the expression as "x in deptdetails" for every loop of deptdetails object it will pull out the data to the variable "x" and by using this variable we can access its properties as like "x.dept" and "x.depthead"
Result :
If the requirement is like getting the each property to each row, then we have to follow the below syntax:
<li ng-repeat="(key,value) in collection"> {{key}} - {{value}} </li>
Sample Look afor above scenerio :
<script type="text/javascript">
var myapp = angular.module('myApp', []);
myapp.controller('ctrlr', ['$scope', function ($scope) {
$scope.empobj = {
"Name": "Kiran",
"Role": "Developer",
"Location": "Banglore"
}
}]);
</script>
In the above script, we are having "empobj" object with properties name,role and location. Now if we want each property to its individual set of behaviour the code looks as like below :
<body ng-app="myApp" ng-controller="ctrlr">
<ul>
<li ng-repeat="(x,y) in empobj">{{x}} - {{y}}</li>
</ul>
</body>
In the above code, we can see "x" was set as "key" and "y" was like "value".
Result :
Duplictes problem with Track by solution :
In ng-repeat if our data contains any duplicates then it causes to the creation of the exception.
Sample of duplicate : <li ng-repeat="x in ['Ravi','Ravi','Hari']">{{x}}</li>
If we observe in the place of collection I declared an array with naming 'Ravi' as multiple times which leads to duplicate exception. It generates an error as like follows :
If we take a keen eye on the above image in the first statement itself it asks us to use the "track by" expression for maintaining the uniqueness.
Usig track by to our expression :
<li ng-repeat="x in ['Ravi','Ravi','Hari'] track by $index">{{x}}</li>
Results without exception like below :
No comments:
Post a Comment