ng-repeat не работает, если я заполняю массив с помощью push

Question

ng-repeat работает, если я создаю статический массив, но не если я создаю массив динамически.

HTML

<div ng-repeat="item in items">{{ item }}</div>

Код, который заполняет массив и отображает то, что я ожидаю в HTML

$scope.items = ["a", "b", "c"];

Код, который заполняет массив, но ничего не отображает в HTML

$scope.items = [];
$scope.items.push("a"); 
$scope.items.push("b");
$scope.items.push("c");

Я должен добавить, что когда я смотрю на массив в отладчике, $scope.items содержит 3 значения. Он просто не отображается в HTML.

Answer 1

Спасибо всем за помощь. Я вводил $ scope и использовал его правильно. Моя проблема заключалась в том, что время от времени мой массив содержал повторяющиеся записи. Изменение моего HTML на

<div ng-repeat="item in items track by $index">{{ item}}</div>

исправил проблему.

Answer 2

Было бы неплохо узнать, в какой момент вы выполняете эту совокупность элементов $ scope с учетом того, как работает цикл дайджеста. Следующее является чем-то, что работает независимо от того, как вы заполняете массив:

angular.module('app', [])

angular.module('app').controller('DemoController', ['$scope', function($scope) {
  $scope.items = [];
  
  $scope.items.push(1);
  $scope.items.push(2);
  $scope.items.push(3);
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>

<section ng-app="app" ng-controller="DemoController as ctrl">
  <div ng-repeat="item in items">{{item}}</div>
</section>

Это работает с использованием $ scope.items и доступа к нему из HTML, когда создается экземпляр Controller. Тем не менее, я бы порекомендовал следующий более чистый подход:

angular.module('app', [])

angular.module('app').controller('DemoController', function() {
  this.items = [];
  
  this.items.push(1);
  this.items.push(2);
  this.items.push(3);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<section ng-app="app" ng-controller="DemoController as ctrl">
  <div ng-repeat="item in ctrl.items">{{item}}</div>
</section>

Основное отличие здесь заключается в том, что вы не загрязняете объект $ scope (он даже не внедряется), но создаете свойство в экземпляре контроллера.

Имейте в виду, что очень важно знать, когда и как вы выполняете заполнение массива, потому что цикл дайджеста AngularJs работает особым образом.

Надеюсь, это помогло.