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指令的使用实例之前，我们需要先对AngularJS和ng-repeat指令做一个基本的了解。 AngularJS是Google开发的一个开源的前端JavaScript框架，用来开发动态网页。它通过HTML的扩展（即所谓的...
当在HTML模板中使用`ng-repeat`时，每个重复项都会创建一个新的子Scope，这些子Scope继承自它们最近的父Scope。 `ng-repeat`指令的工作原理如下： 1. **数据绑定**：`ng-repeat`会根据提供的表达式（如`ng-repeat=...
在AngularJS中，`ng-repeat`是一个非常常用且强大的指令，用于动态地渲染列表或集合中的数据。然而，如果不注意一些关键的性能问题，它可能会成为应用性能瓶颈。以下是对`ng-repeat`性能优化的详细分析和建议： 一...
这里$index代表当前ng-repeat生成的元素的索引，所以在ng-model中使用$index来确保每个输入框绑定的是数组中正确位置的元素。 3. 在控制器中，通过定义一个数组变量（例如$scope.conf），然后通过ng-model绑定这个...
ng-repeat-start与ng-repeat-end时AngularJS（1.2.x）扩展的，使用这两个指令可以灵活控制遍历形式。 例如： index.html <div class=uk-panel ng-controller=UserCtrl> <ul class=uk-list> <li ng-repeat-start=...
本文实例讲述了AngularJS使用ng-repeat和ng-if实现数据的删选显示效果。分享给大家供大家参考，具体如下： 1.首先重复回顾一下ng-repeat指令 ng-repeat可以实现内容的重复显示，比如我们可以写如下代码 [removed] ...
本文实例分析了AngularJS的ng-repeat指令与scope继承关系。分享给大家供大家参考，具体如下： ng-repeat指令的使用方式可以参考如下代码： <!doctype html> <html lang=en> <head> <meta ...
AngularJS ng-repeat 指令 AngularJS 实例 循环输出多个标题: <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body ng-app=myApp ng-...
总结来说，在 AngularJS 中使用 `ng-repeat` 和 `ng-model` 需要注意以下几点： 1. 在循环内部，每个重复项应有自己的独立模型，避免共享同一个变量。 2. 使用 `track by` 指令可以确保每个重复项拥有独立的标识，...
在AngularJS中使用ng-repeat指令时，如果出现“[ngRepeat:dupes]”报错，说明在使用ng-repeat生成列表元素时，列表中存在重复的元素，而AngularJS默认情况下是不允许在重复项的重复器中创建多个相同元素的。...
本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下： ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。 定义： <element ng-repeat=expression> 说明...
针对这一需求，AngularJS提供了多种方法来实现对ng-repeat渲染完成的监听，本文将介绍两种常用的方法。 第一种方法是通过使用自定义指令来监听ng-repeat渲染的结束。具体做法是定义一个名为onFinishRenderFilters的...
但在二维数组中，ng-repeat需要进行嵌套使用，即外层ng-repeat遍历外层数组，内层ng-repeat遍历内层数组。 在本文中，我们看到了如何使用ng-repeat指令来遍历一个二维数组，并将其展示在HTML中。具体来说，是通过...
在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作，angular本身并没有提供监听ng-repeat渲染完成的指令，所以需要自己动手写。有经验的同学都应该...
AngularJS是Google开发...通过本文的介绍，我们可以看到ng-repeat在实际开发中的应用，以及如何通过实例加深对其使用方法的理解。对于任何希望熟练掌握AngularJS的开发者而言，理解和掌握ng-repeat的用法是非常重要的。