AngularJS中ng-repeat使用实例

        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>

运行结果:

AngularJS中ng-repeat使用实例

你可能感兴趣的:(JavaScript,AngularJS,ng-repeat)