angular js ng repeat

By
ng-repeat with Angular JS
angular ngrepeat is inbuilt directive in angular JS.Its used for creating perfect list,table or any other which are repetitive in html. It's a frequently use directive in application where angular Js scripting language are used. ngrepeat is written as ng-repeat in html side code.Definition of ngrepeat is its a directive which iterate the collection very similar to for each loop. This angular directive is used with normal array or any Json object . ng-repeat is just like a for or foreach loop.You may say that angular ng repeat is synonyms of angular js for loop or for each loop in angular js. I hope you all are aware about the for and foreach loop. To use the ng-repeat we have to know about the following keyword and their brief information

1. $index : index is a way to show which iteration of a loop you’re in.
2. Json : JSON is JavaScript Object Notation. This is in form of key value pair .
3. Angular JS expression :We already discussed about the angular JS expression you can click here to     know more about the angular Js expression.
4.Track by :
5. $even : true if the iterator position $index is even else it's false.
6. $odd :   true if the iterator position $index is odd else it's false.
7. $first : true if the$index position is first.
8. $second : true if the$index position is second.
9. $last : true if the$index position is last.

AngularJS ng repeat / for loop in angularjs

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
    <table ng-controller="myCtrl" border="1">
        <tr ng-repeat="x in myData">
            <td>{{x.Name}}</td>
            <td>{{x.Country}}</td>
        </tr>
    </table>
</body>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.myData= [
          {
              "Name": "Great Wall of China",
              "Country": "China"
          },
          {
              "Name": "Taj Mahal",
              "Country": "India"
          },
          {
              "Name": "Great Pyramid of Giza",
              "Country": "Egypt"
          },
          {
              "Name": "Chichen Itza",
              "Country": "Mexico"
          }
        ]
    });
</script>

Output AngularJS ng repeat

Great Wall of ChinaChina
Taj MahalIndia
Great Pyramid of GizaEgypt
Chichen ItzaMexico

More about ngrepeat

Suppose you want to add different color for odd and different color for even. Then in ngrepeat directive have $odd or $even properties.To do this you have to just paste your code in above
<tr ng-repeat="x in myData" ng-style="{'color':($even?'red':'blue')}">
 <td>{{x.Name}}</td>
 <td>{{x.Country}}</td>
</tr>
Similarily you can use other properties of ngrepeat angular directive in above.Here i am using the ng-style directive ng-style is basically used for the add the style in HTML.You can also use track by under ngrepeat section.Lets take a an scenario to understand this suppose you have an array & elements are [13,45,46,12,46] in this array 46 exist in two time but you use ngrepeat then its not display so you have to use track by $index like below.
<tr ng-repeat="y in myData track by $index">

0 comments:

Post a Comment