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 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>
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 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 : 

  • 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 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的更多相关文章

  1. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  2. part 4 AngularJS ng src directive

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  5. AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

    .controller('HomeController', function($scope,$location) { $scope.userName='天下大势,为我所控!'; $scope.clkU ...

  6. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

  7. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  8. AngularJS中有关Directive的汇总

    本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...

  9. AngularJS自定义指令directive:scope属性 (转载)

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

随机推荐

  1. Android中Webview使用javascript调用事先定义好的Java函数

    1. 首先定义好一个类,专们用于给javascript调用 public class JavaScriptInterface { // share your news public void shar ...

  2. Windows平台下libevent库的使用

    1     引子 手头上有一个使用了4个年头的HttpClient库,自己封装的,对于集成了IE浏览器的应用程序很友好.但最近想把产品扩展到Chrome和FireFox阵营,萌发了重构HttpClie ...

  3. Linux/RedHat 编译安装GNU gcc 4.9.0 (g++)

    这里说的是编译安装,yum/apt-get 等安装方法比較简单,不阐述! 1.下载源代码包:gcc.gnu.org 2.解压: tar -xjvf gcc-4.9.0.tar.bz2 3.下载编译所需 ...

  4. Linux内存管理学习笔记 转

    https://yq.aliyun.com/articles/11192?spm=0.0.0.0.hq1MsD 随着要维护的服务器增多,遇到的各种稀奇古怪的问题也会增多,要想彻底解决这些“小”问题往往 ...

  5. 终端I/O之波特率函数

    波特率(baud rate)是一个以往采用的术语,现在它指的是"位/秒"(bits per second).虽然大多数终端设备对输入和输出使用同一波特率,但是只要硬件许可,可以将它 ...

  6. 关于QStringRef

      QString 为字符串操作提供了各种成员比如mid().left().right().它们都创建会一个新的字符串,因此有一个对在已存在QString的malloc和深拷贝. 与此相反,QStri ...

  7. IDEA社区版运行并发布web项目

    IDEA社区版相对收费版少了很多功能,其中包括tomcat等web服务器的支持.网上大部分的IDEA web应用发布教程都是基于收费版的,社区版并没有这么直接的图形化工具可以运行或发布web应用.幸运 ...

  8. iOS 开发之— NSURLProtocol

    最近在项目里由于电信那边发生dns发生域名劫持,因此需要手动将URL请求的域名重定向到指定的IP地址,但是由于请求可能是通过NSURLConnection,NSURLSession或者AFNetwor ...

  9. Jquery 扩展方法

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...

  10. 日期加减js,天数组增加,日期自动修改

    最近在弄火车票的项目,因为火车票选日期最大范围是20天,所要要控制在当前时间的20天内的一个日期 开始在网上找了一个直接修改Date prototype 后来领导说这样不太好,所以只能换个别的方法写 ...