ng-repeat does not work if I populate my array using push

Question

ng-repeat works if I create a static array but not if I create the array dynamically.

HTML

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

Code that populates the array and renders what I expect in the HTML

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

Code that populates the array but renders nothing in the HTML

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

I should add that when I look at the array in the debugger $scope.items contains the 3 values. It just doesn't render in the HTML.

Can you create a minimal reproducible example demonstrating the issue? This should work and the only reason I can think that your view is not updating is because you are pushing items onto the array outside of Angular's digest cycle. — Lex
– Lex, Commented Jan 9, 2019 at 23:48

wilsotobianco · Accepted Answer · 2019-01-10 06:36:46Z

It would be nice to know in what moment are you performing this $scope items population considering how the digest cycle works. The following is something that works no matter how you populate the array:

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>

This works by using the $scope.items and accessing it from the HTML when the Controller gets instantiated. Nevertheless I would recommend the following cleaner approach:

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>

The main difference here is that you're not polluting the $scope object (it's not even injected) but creating a property in the controller's instance.

Keep in mind that's very important to know when and how you're doing the population of the array because AngularJs digest cycle works in a peculiar way.

I hope this helped.

Phil O · Accepted Answer · 2019-01-10 14:04:27Z

0

Thanks for everyone's help. I was injecting $scope and using it properly. My issue was that every now and then my array had duplicate entries in it. Changing my HTML to

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

fixed the issue.

answered Jan 10, 2019 at 14:04

Phil O

1,6784 gold badges32 silver badges54 bronze badges

Collectives™ on Stack Overflow

ng-repeat does not work if I populate my array using push

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related