ng-repeat :1.显示一组HTML元素 2.显示一个对象的所有属性名及属性值
ng-repeat 指令可以接受类似 “variable(变量) in arrayExpression （数组表达式）” 或（key , value） in objectExpression(对象表达式) 这些格式的参数。当参数为数组时，数组中元素根据定义先后顺序排列。
<!DOCTYPE html>
<html ng-app="notesApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> <div ng-repeat="(author,note) in ctrl.notes"> <span class="label">{ {note.label}}</span> <!--取出属性值--> <span class="author" ng-bind="author"></span> <!--获取对应属性名--> </div> <script> angular.module('notesApp',[]).controller('MainCtrl',[ function(){ var self=this; self.notes={ shyam:{ id:1, label:"first", done:false, }, Misko:{ id:2, label:"second", done:true, }, brad:{ id:3, label:"third", done:false, } } }]) </script> </body> </html>输出：
first shyam
second Misko
third brad
ng-repeat中的辅助变量
元素的索引：
第一个，中间、最后一个、以及奇、偶性。
每一个以 $ 为前缀的变量都是 angular JS 内置的 它可以提供当前元素的某些统计信息
$first 、$middle 和 $last 都是布尔型变量，返回一个布尔值 ，判断对应数组中的当前元素是否是第一个，中间 还是最后。是返回true 否则返回false
$index 给出当前元素的索引值，出于数组中第几个。
$odd 和 $even 代表着它的索引值的 奇、偶性。，可以用来在 奇、偶行上显示不同风格的元素，或其他条件判断。
<!DOCTYPE html>
<html ng-app="notesApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> <div ng-repeat="note in ctrl.notes"> <div> first Element:{ {$first}}</div> <div> middle Element:{ {$middle}}</div> <div> last Element:{ {$last}}</div> <div> Index of Element:{ {$index}}</div> <div> At Even Position:{ {$even}}</div> <div> At Odd Position:{ {$odd}}</div> <span class="label">{ {note.label}}</span> <span class="status" ng-bind="note.done"></span> <br /><br /> </div> <script> angular.module('notesApp',[]).controller('MainCtrl',[ function(){ var self=this; self.notes={ shyam:{ id:1, label:"first", done:false, }, Misko:{ id:2, label:"second", <!--$middle--> done:true, }, lala:{ id:3, <!--$middle--> label:"third", done:false, }, brad:{ id:4, label:"last", done:true, } } }]) </script> </body> </html>输出
first Element:true //是第一个元素
middle Element:false //不是中间元素
last Element:false //不是最后一个元素
Index of Element: 0 //元素索引为0
At Even Position:true //处于奇数位置
At Odd Position:false //不处于偶数位置
first false
first Element:false
middle Element:true
last Element:false
Index of Element:1
At Even Position:false
At Odd Position:true
second true
first Element:false
middle Element:true
last Element:false
Index of Element:2
At Even Position:true
At Odd Position:false
third false
first Element:false
middle Element:false
last Element:true
Index of Element:3
At Even Position:false
At Odd Position:true
last true