AngularJS ng-repeat not updating when updating array

I have a problem where ng-repeat does not update the list when the array changes.

I use the JavaScript promise to compute the calculation, then to return an object containing 2 arrays. These arrays should then be displayed in the view below the code snippet.

<button class="btn" data-toggle="modal" data-target="#tableModal" ng-click="vm.compareTables(vm.table)">Some text</button>
<!-- Modal -->
<div class="modal fade" id="tableModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{ vm.table.title}}</h4>
            </div>
            <div class="modal-body">
                <h4>You got</h4>
                <p ng-repeat="g in vm.got">{{ g }}</p>
                <h4>You dont:</h4>
                <p ng-repeat="d in vm.dont">{{ d }}</p>
            </div>
        </div>
    </div>
</div>

In the controller, I wrap the function in a promise and return the correct answer with 2 filled arrays. I can also print the result in the controller, ng-repeat just doesn't update the view.

var vm = this;

vm.compareTables = function (table) {
    getData().then(function succesCallback(response) {
        vm.ing = response.data;
        var r = table;
        var promise = pro(r, vm.ing);
        promise.then(function (data) {
            console.log(data.got);
            console.log(data);
            vm.got = data.got;
            vm.dont = data.dont;
        });
    });
}

The above promise returns the correct result.

I am using angular 1.6.1 if this helps. The controller and view are connected to a component that is working fine.

UPDATE

Here is the console output for returning a promise Console exit

+4
4

vm.got = .. in a $scope.$apply(function () { ... }), digest cycle. Angular, , , , , promise/callback, Angular native ($http, $q, $resource).

+1

$timeout(function () {
    vm.got = data.got;
    vm.dont = data.dont;
})
0

, . . , , , . ng-repeat

0

angular, $scope. $apply() callback .

0

Source: https://habr.com/ru/post/1666138/


All Articles