AngularJS中ng-repeat使用实例

最新推荐文章于 2018-01-16 11:10:30 发布

wjxbj

最新推荐文章于 2018-01-16 11:10:30 发布

阅读量182

点赞数

分类专栏： AngularJS 文章标签： javaScript angularJS ng-repeat ViewUI

AngularJS 专栏收录该内容

85 篇文章 0 订阅

订阅专栏

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>

运行结果：

wjxbj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中ng-repeat使用实例

ng-repeat可能是最有用的Angular指令了，它可以根据集合中的项目一次创建一组元素的多份拷贝。不管在什么地方，只要你想创建一组事物的列表，就可以使用这条指令。 ng-repeat将会生成标签内部所有HTML元素的一份拷贝，包括放指令的标签。可以通过$index返回当前引用的元素序号，还可以通过$first、$middle及$last，ng-repeat...
复制链接

扫一扫

专栏目录