Question

我有一个简单的数组和ng-repeat：

<p ng-repeat="person in persons">
  Hello {{person}}!
</p>

但是当我使用for循环生成它时，结果非常奇怪！ ng-repeat无法按顺序打印。请参阅codepen。

Answer 1

在你的JS（在代码笔上）你有：

$scope.persons = {};
for (var i = 0; i < 20; i++) {
    console.log(i);
    $scope.persons[i] = i;
}

您正在发起persons作为对象。更改为$scope.persons = [];

Answer 2

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.persons = [];
  for (var i = 0; i < 20; i++) {
            console.log(i);
            $scope.persons[i] = i;
       $scope.results = angular.toJson($scope.persons)
        }

  //$scope.persons = [1, 2, 3, 4, 5];
});

https://codepen.io/anon/pen/rmVaZV?editors=1111

Answer 3

使用最新版本的角度（例如1.6.0），它不会发生。你使用旧版本（1.1.5），似乎这个版本默认排序数组。

Answer 4

ng-repeat对象{}本身不提供顺序显示（大多数情况下元素有顺序，但不是100％） - 如果是对象，则键为String，因此它们被命名为字符串（["1", "11", "2"]） - 但JS根本不保留{}的顺序，所以即使它们以任何顺序显示，有一天它可能会破坏而没有任何重大原因（浏览器更新）等等）。只需使用有序的数组，其中sort更多自然（键为number），检查Codepen：https://codepen.io/anon/pen/mmJyGX或使用orderBy和其他字段，如{ {1}}。我的建议是，如果您关心订单，请始终使用id代替[]，因为它始终会按预期工作。

Angularjs for循环与ng-repeat奇怪的问题

4 个答案: