ng-repeat 是 angular 中可以用來透過迴圈方式來取得陣列中各個 item 值的方法
基本範例
main.js
var ballApp = angular.module('ballApp', []); ballApp.controller('testCtrl', ['$scope', function($scope) { // 姓名陣列 $scope.names = ['Johnson', 'Tom', 'Jim']; }]);
<body ng-controller="testCtrl"> <ul> <!-- 透過 i in array 的方式來描述迴圈走訪 --> <!-- $index 為 ng-repeat 中提供的索引值變數 --> <li ng-repeat="name in names">{{$index}} {{name}}</li> </ul> </body>
注意
ng-repeat 並不是一般迴圈用法而已,以下這個例子會產生錯誤:
// 當陣列中有值是相同的情況下,使用基本範例這樣的 ng-repeat 會產生錯誤 $scope.names = ['Johnson', 'Johnson', 'Johnson'];
解決方法是在 ng-repeat 中描述要依照 item 走訪
<body ng-controller="testCtrl"> <ul> <!-- 依照 item 走訪 --> <li ng-repeat="name in names track by $index">{{$index}} {{name}}</li> </ul> </body>