ng-repeat可能是最有用的Angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝。不管在什么地方,只要你想创建一组事物的列表,就可以使用这条指令。
ng-repeat将会生成标签内部所有HTML元素的一份拷贝,包括放指令的标签。可以通过$index返回当前引用的元素序号,还可以通过$first、$middle及$last,ng-repeat指令返回布尔值,告诉你当前元素是否是集合中的第一个元素、中间的某个元素,或者最后一个元素。
ng-repeat实例:
Repeat.html
<html ng-app='myApp'>
<head>
<title>Repeat实例</title>
</head>
<body ng-controller='StudentController'>
<table>
<tr ng-repeat='student in students'>
<td>{{$index + 1}}</td>
<td>{{student.name}}</td>
<td>{{student.score}}</td>
</tr>
</table>
<button ng-click="insertJill()">添加</button>
<script src="lib/angular/angular.js"></script>
<script>
var myApp=angular.module('myApp',[])
myApp.controller('StudentController', function($scope) {
$scope.students = [{name:'Mary',score:'98'},{name:'Tom',score:'95'},{name:'Jack',score:'100'}];
$scope.insertJill = function() {
$scope.students.splice(1,0,{name:'Jill',score:'99'});
}
});
</script>
</body>
</html>
运行结果: