AngularJS - ng-repeat & bind not updated when Data pushed into Array

Question

i am new to angularjs, i've already read that with ng-bind you have to call $scope.apply() to update the Output when the data source array has changed. But i've read also that it should work like a charm & out of the box when you are using ng-repeat. The following situation does not show all elements in the page:

<body ng-app="gallery">
  <div ng-controller="GalleryController">
      {{imageFolder}}
      <div class="uk-child-width-1-5 uk-grid-small" uk-grid>
          <div ng-repeat="image in imageFolder">
              hier
          </div>
      </div>
  </div>
</body>

And the JS:

let gallery = angular.module('gallery', []);

        gallery.controller('GalleryController', function($scope) {

            $scope.imageFolder = [1,2];

            setTimeout(function(){
                console.log($scope);
                $scope.imageFolder.push(6,7);
                console.log($scope); 
                console.log($scope.imageFolder)
            },1000);

             $scope.imageFolder.push(3,4,5);
             console.log($scope);
});

and in the Frontend we see:

[1,2,3,4,5] hier hier hier hier hier

6 and 7 are visible in console.log but no frontend Update is triggered (?). Later in this project the image informations like url and title should be loaded into the DOM via Ajax (sharepointplus) (but this take some time ca. 5-7 seconds) - My first version did not show any images - even ng-repeat was not triggered because of the same issue forced with setTimeOut...

what can i do here to let angular refresh on object content change aka: "empty array --> filled array"?

thanks for your help & suggestions.

it's not how it works in angular world. check sitepoint.com/understanding-angulars-apply-digest and stackoverflow.com/questions/40591644/… for details why you better use $timeout instead of setTimeout — skyboyer
– skyboyer, Commented Nov 27, 2018 at 13:10
Thanks for your feedbacks - the setTimeout function just simulates the ajax call which i can not handle directly with angular (jQuery when & done) - you are both right. Its not the cleanest way but for an example & to keep the code simple here it was the best "usecase" example in my opinion. any suggestions to Anil Samal's solution? - is it okey to call $scope.$apply() each time i loaded new data on user interaction? — Marco
– Marco, Commented Nov 27, 2018 at 13:29

Anil Samal · Accepted Answer · 2018-11-27 13:13:23Z

1

Please do this way

        setTimeout(function(){
            console.log($scope);
            $scope.imageFolder.push(6,7);
            console.log($scope); 
            console.log($scope.imageFolder);
            $scope.$apply();
        },1000);

answered Nov 27, 2018 at 13:13

Anil Samal

1,0531 gold badge13 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - ng-repeat & bind not updated when Data pushed into Array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related