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 中提供的索引值變數 -->          
  • {{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>
    
    Categories: AngularJS