标签：
ng-repeat is similar to foreach loop in C#.
Let us understand this with an example. Here is what we want to do.
1.
For each employee we have in the employees array we want a table row.
With in each cell of the table row we to display employee
This can be achieved very easily using ng-repeat directive
Script.js : The controll function builds the model for the view. The model employees has the list of all employees.
var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { firstName: "Ben", lastName: "Hastings", gender: "Male", salary: 55000 }, { firstName: "Sara", lastName: "Paul", gender: "Female", salary: 68000 }, { firstName: "Mark", lastName: "Holland", gender: "Male", salary: 57000 }, { firstName: "Pam", lastName: "Macintosh", gender: "Female", salary: 53000 }, { firstName: "Todd", lastName: "Barber", gender: "Male", salary: 60000 } ]; $scope.employees = employees; });
HtmlPage1.html : In the view, we are using ng-repeat directive which loops thru each employee in employees array. For each employee, we a get a table row, and in each table cell of the table row, the respective employee details (Firstname, Lastname, Gender, Salary) are retrieved using the angular binding expression
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/angular.min.js"></script> <script src="Scripts/Script.js"></script> </head> <body ng-app="myModule"> <div ng-controller="myController"> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Gender</th> <th>Salary</th> </tr> </thead> <tbody> <tr ng-repeat="employee in employees"> <td> {{ employee.firstName }} </td> <td> {{ employee.lastName }} </td> <td> {{ employee.gender }} </td> <td> {{ employee.salary }} </td> </tr> </tbody> </table> </div> </body> </html>
Script.js : The model is an array of countries. Each country contains an array of cities.
var app = angular .module("myModule", []) .controller("myController", function ($scope) { var countries = [ { name: "UK", cities: [ { name: "London" }, { name: "Birmingham" }, { name: "Manchester" } ] }, { name: "USA", cities: [ { name: "Los Angeles" }, { name: "Chicago" }, { name: "Houston" } ] }, { name: "India", cities: [ { name: "Hyderabad" }, { name: "Chennai" }, { name: "Mumbai" } ] } ]; $scope.countries = countries; });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/angular.min.js"></script> <script src="Scripts/Script.js"></script> </head> <body ng-app="myModule"> <div ng-controller="myController"> <ul ng-repeat="country in countries"> <li> {{country.name}} <ul> <li ng-repeat="city in country.cities"> {{city.name}} </li> </ul> </li> </ul> </div> </body> </html>
Finding the index of an item in the collection :
The following example, shows how to retrive the index of the elements from a nested collection
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/angular.min.js"></script> <script src="Scripts/Script.js"></script> </head> <body ng-app="myModule"> <div ng-controller="myController"> <ul ng-repeat="country in countries" ng-init="parentIndex = $index"> using ng-init <li> {{country.name}} - Index = {{ $index }} <ul> <li ng-repeat="city in country.cities"> {{city.name}} - Parent Index = {{ parentIndex }}, Index = {{ $index }} </li> </ul> </li> </ul>
<ul ng-repeat="country in countries"> <li> {{country.name}} - Index = {{ $index }} <ul> <li ng-repeat="city in country.cities"> using $parent.$index {{city.name}} - Parent Index = {{ $parent.$index }}, Index = {{ $index }} </li> </ul> </li> </ul> </div> </body> </html>
Part 6 AngularJS ng repeat directive
标签：
原文地址：http://www.cnblogs.com/gester/p/5100818.html
