<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8"/>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<title>Array</title>
<meta charset="utf-8"
/>
</head>
<body ng-controller="MainCtrl
as ctrl">
<div
ng-repeat="note
in ctrl.notes">
<!--$前置變數是由AngularJS所提供的helper變數，針對特定項目只到repeater的狀態-->
<!--$first：是否為第一項-->
<!--$middle：是否為中間項-->
<!--$last：是否為最後一項-->
<!--$index：提供陣列的索引或位置-->
<!--$even：項目索引是否為偶數-->
<!--$odd：項目索引是否為奇數-->
<div>First:{{$first}}|
Middle:{{$middle}}| Last:{{$last}}| Index:{{$index}}| Even:{{$even}}| Odd:{{$odd}}</div>
</div>
<div
ng-repeat="note
in ctrl.notes1">
{{note.id}}
: {{note.$$hashKey}}
</div>
<!--使用追蹤ID，此時AngularJS並沒有需要產生$$hashKey，DOM元素依據物件的ID而被重用。-->
<div
ng-repeat="note
in ctrl.notes2 track by note.id">
{{note.id}}
: {{note.$$hashKey}}
</div>
<!--標記repeat起始位置和結束位置，此處Assignee將不會被repeat到。-->
<<table>
<tr ng-repeat-start="note
in ctrl.notes">
<td>ID:{{note.id}}</td>
</tr>
<tr ng-repeat-end>
<td>Label:{{note.label}}</td>
</tr>
<tr>
<td>Assignee:{{note.assignee}}</td>
</tr>
</table>
<script
type="text/javascript">
angular.module('notesApp',
[])
.controller('MainCtrl',
[function
() {
var
self = this;
self.notes = [
{ id: 1, label: 'First Note', done: false,
assignee: 'Isabella' },
{ id: 2, label: 'Second Note', done: false,
assignee:0 },
{ id: 3, label: 'Third Note', done: true,
assignee: 'Rong' },
{ id: 4, label: 'Fourth Note', done: false,
assignee: 0 },
{ id: 5, label: 'Fifth Note', done: false,
assignee: 'Caesa' }
];
self.notes1 =
angular.copy(self.notes);
self.notes2 =
angular.copy(self.notes);
}]);
</script>
</body>
</html>
執行結果：
沒有留言:
張貼留言