1.ng-repeat 一看就知道跟foreach等指令类似,用于循环重复。一般用于列表和表格中。用法如下:

<tr ng-repeat="data in dataList">
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
</tr>

显而易见,dataList是定义在$scope下的一个数组。

除了直接遍历数据,还有以下属性可以辅助开发。

$index----显示每一个子项的index

<li ng-repeat=" data in dataList ">{{ $index }}</li>

$first $middle $last(除了第一项返回true,其他都返回false)

$even $odd(基数行放回true,偶数行返回false)

<li class="{{ $even &&  'active1‘ }}" ng-repeat=" data in dataList ">{{ data }}</li>

2.另外还有ng-repeat-start和ng-repeat-end两个指令很有用,

用来定义重复的结构的开始和结尾

<div ng-repeat-start="data in dataList">{{data}}</div>
<div ng-repeat-end>{{data}}</div>

  

ng-repeat指令应用的更多相关文章

  1. Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

    ng-app   定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...

  2. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  3. 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 ...

  4. ng 指令的自定义、使用

    1.创建和使用var app = angular.module('myApp',['ng']);app.directive('指令名称',func); 自定义指令的命名:驼峰式,有两部分构成,前缀一般 ...

  5. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  6. 走进AngularJs(五)自定义指令----(下)

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  7. 走进AngularJs(四)自定义指令----(中)

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

  8. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  9. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  10. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

随机推荐

  1. 关于MySql的DBHelper类以及数据分页

    前端: <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix=& ...

  2. [Spring] - 读写分离

    使用Spring可以做到在应用层中实现数据库的读写分离. 参考文档: http://blog.csdn.net/lifuxiangcaohui/article/details/7280202 思路是使 ...

  3. 【python】*与** 参数问题

    可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的,可以是1个.2个到任意个,还可以是0个. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 ...

  4. SQL语句 DML,DDL,DCL

    数据控制语言(DCL)是用来设置或者更改数据库用户或角色权限的语句,这些语句包括GRANT.DENY.REVOKE等语句,在默认状态下,只有 sysadmin.dbcreator.db_owner或d ...

  5. KT vs SKT [20160816]

    KT:索尔 SKT:茂凯,塔里克,卡西奥佩娅 普朗克+烬,大招开团. 塔里克保护,眩晕.

  6. 关于AX 2012 SSRS 导出PDF时出现group by 分页错误的情况

    近期,在AX  2012 上一个二次开发的报表出现了一个奇怪的现象,报表设计正常,分组.分页设计正常, 但出现问题在,当报表在AX 上打开,按dataareaid 分页是正常的,如下图中title中的 ...

  7. org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'PUT' not supported

    1:先上控制台报错信息 org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'PUT' not ...

  8. php curl vs python提交多维数组+文件

    总结: 1.data数据格式 2.php post 格式无需json_encode(关联数组,所以可以绕弯)  参考:http://bbs.csdn.net/topics/390645553?page ...

  9. 纸上谈兵:队列(queue)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 队列(queue)是一个简单而常见的数据结构.队列也是有序的元素集合.队列最大的特 ...

  10. javascript垃圾回收机制

    js中垃圾回收的算法一般包括两种,一种是“清除标记”,另一种是“引用计数”,现在较为流行的是第一种. “引用计数”现在基本已经被抛弃,主要原因是会导致循环引用,从而导致严重的问题(ie9之前的版本DO ...