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 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 :
- 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的更多相关文章
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- part 4 AngularJS ng src directive
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- 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 ...
- angularJs中自定义directive的数据交互
首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- AngularJS中有关Directive的汇总
本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
随机推荐
- Linux device tree 简要笔记
第一.DTS简介 在嵌入式设备上,可能有不同的主板---它们之间差异表现在主板资源不尽相同,比如I2C.SPI.GPIO等接口定义有差别,或者是Timer不同,等等.于是这就产生了BSP的一个 ...
- C++中C/C++格式化输出
对于不同的机器,一此格式化输出的函数经常会得不到正确的输出,比方小端上的程序在大端上执行等,另外,在日常程序开发时,也会经常被这种小问题而困扰非常久.终于发现是她的问题.不免有点叹息,以下对print ...
- 【M14】明智运用异常规范
1.异常规范的使用场景是,承诺方法只抛出什么样的异常,或者不抛出异常.如果运行的时候,不满足承诺,C++自动调用unexpected方法,unexpected调用terminate方法,termina ...
- 在ASP.NET中支持断点续传下载大文件(ZT)
IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交 ...
- Kubuntu（14.04）共享wifi（热点）
笔记本(kubuntu14.04)通过有线上网,共享本机无线给手机.平板及其他通过wifi上网的设备. 曾经在网上找过各种方法.下载了非常多软件都不能在本机上实现wifi共享,以下这样的方法眼下相对简 ...
- leetcode二分查找问题整理
自从做完leetcode上的三道关于二分查找的题后,我觉得它是比链表找环还恶心的题,首先能写出bugfree代码的人就不多,而且可以有各种变形,适合面试的时候不断挑战面试者,一个程序猿写代码解决问题的 ...
- 基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
- 基于HTML5实现五彩连珠小游戏
今天给大家分享一款基于HTML5实现五彩连珠小游戏.这款游戏的规则:点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球:当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失, ...
- Systemd 入门教程：实战篇
Systemd 入门教程:实战篇 上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动 对于那些支持 System ...
- Nop关键技术点概述
数据访问层 Nop.Data项目包含用于与数据库及其它数据存储交互的类和功能.Nop.Data类库帮助将数据访问逻辑和业务对象分离.Nop使用的是Entity Framework Code First ...