你的位置:首页 > Java教程

[Java教程]Part 6 AngularJS ng repeat directive


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

  • Firstname
  • Lastname
  • Gender
  • Salary

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 ="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>

Nested ng-repeat example : The model contains an array of countries, and each country has an array of cities. The view must display cities nested under their respective country.

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;      });

HtmlPage1.html : Notice that we are using two ng-repeat directives in the view, one nested inside the other. The outer ng-repeat directive loops thru each country in the model. The inner ng-repeat directive loops thru each city of a given country.
 <!DOCTYPE html><html ="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 : 

  • To find the index of an item in the collection use $index property
  • To get the index of the parent element
    • Use $parent.$index or
    • Use ng-init="parentIndex = $index"

The following example, shows how to retrive the index of the elements from a nested collection

 <!DOCTYPE html><html ="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>