Angular学习（八）——List、Table和其他重复元素

在Angular指令中最有用的可能就是ng-repeat，该指令为一个集合每条信息创建相应的元素集合。在处理一组事务的时候可以运用这个指令。

假如我们为老师创建一个学生点名册。我们可以从服务器获得相应的学生信息。我们可以在Javascript中为他定义一个模型：

var strudents = [{name:"Mary contrary",id:"1"},{name:"jack spark",id:"2"},

  {name:"jill hill",id:"3"}];

function StudentListCOntroller($scope){

$scope.strudents = students;

}

为了将学生信息展现处来，我们可以做入下事情：

<ul ng-controller="">

<li ng-repeat = "student in students">

<a href="/student/view/{{student.id}}">{{student.name}}</a>

</li>

</ul>

ng-repeat将会在标签内创建所有HTML的copy，包括它自己所放置的标签。同样就如之前所见，改变学生数组将会自动改变展现列表。如果想要插入一个新的学生信息到这个列表中：

function studentListController($scope){

var strudents = [{name:"Mary contrary",id:"1"},{name:"jack spark",id:"2"},

  {name:"jill hill",id:"3"}];

function StudentListCOntroller($scope){

$scope.strudents = students;

}

$scope.insertTom = function(){

$scope.students.splice(1,0,{name:"Tom Thumb", id:"4"});

};

}

同时添加一个按钮来在模板中触发这个事件：

<ul ng-controller="">

<li ng-repeat="student in students">

<a href="/student/view/{{student.id}}">{{student.name}}</a>

</li>

</ul>

<button ng-click="insertTom">Insert</button>

ng-repeat指令同样也可以通过当前元素的$index获取该index所对应的引用，并通过$first,$middle,$last来告诉你当前元素是否是该集合的第一个元素、中间的元素和最后的元素。可以想象运用$index来获取表格中对应的行标签。例如如下模型：

<table ng-controller="AlbumController">

<tr ng-repeat="track in album">

<td>{{$index+1}}</td>

<td>{{track.name}}</td>

<td>{{track.duration}}</td>

</tr>

</table>

var album = [{name:"southwest sernade",duration:"2:34"},

     {name:"northern light waltz",duration:"3:21"},

                     {name:"estern tango",duration:"17:45"}];

function AlbumController($scope){

$scope.album = album;

}