Angular doesn't bind repeater after first push to array

Question

I have an angular repeater bound to an array. When I push a new item, the UI updates as expected, but for subsequent pushes, the array updates but the UI doesn't change. I already tried scope.$apply() but it doesn't make any difference.

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

app.controller('myCtrl', function ($scope) {
    $scope.maxValue = 6;
    $scope.values = [1,2,3,4,5,6];

    $scope.update = function (){
        $scope.maxValue++
        $scope.values.push($scope.maxValue);
        //$scope.$apply();
    }
});

Not sure what I'm doing wrong. Here's a small example that replicates the problem.

Sajeetharan · Accepted Answer · 2018-01-05 12:19:00Z

3

It's because you are pussing the same value again and again which creates duplicate elements, try using track by index

 <li data-ng-repeat="item in values track by $index">

working fiddle

answered Jan 5, 2018 at 12:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kev Over a year ago

ng-repeat doesn't allow duplicates by default? In my real app (not this example) I am actually pushing an object, which is different each time, so I don't understand why it would not work. Does it track by some default property like "id"?

Sajeetharan Over a year ago

no it does not allow duplcates, btw you are pussing a string not an object

Collectives™ on Stack Overflow

Angular doesn't bind repeater after first push to array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related