CODEWITHSUNDEEP
javascriptangularjsajax
Marco
Marco

Reputation: 501

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

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.

Upvotes: 0

Views: 379

Answers (1)

Anil Samal
Anil Samal

Reputation: 1053

Please do this way

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

Upvotes: 1

Related Questions