Smart Table (AngularJs) async data change not updating

Question

I have a table, made using Smart Table in AngularJs.

I am trying to fetching new data and adding to this table using ajax. I push to $scope.rowCollection in ajax call back. However why the newly added data is not displaying in the table? (I am using st-safe-src, and I am adding new data to the collection in st-safe-src.)

Another question is: do I have to add $scope.displayedCollection = [].concat($scope.rowCollection); every time st-safe-src is changed? (adding this line does not solve the issue)

I created this Plunkr with timeout to simulate the ajax call back.

Thanks!

Please add some of your code and make a plunker. This way more peeps are inclined to help. — alphapilgrim
– alphapilgrim, Commented Nov 23, 2016 at 22:02

2ps · Accepted Answer · 2016-11-23 22:14:02Z

1

I fixed your plunkr by updating the timeout code so that invoked $scope.$apply. You should use $scope.$apply to make sure that angular JS components are notified that angular JS models have been changed when you use a non-angular AJAX call (like jQuery) or with core JS callbacks (like jQuery): http://plnkr.co/edit/iI7zpSjmB2db4ryHuzp7?p=preview

      // use $timeout service so that we can automatically invoke 
      // the appropriate apply
      $timeout(function () {
        $scope.rowCollection.push({firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'});
        // do I need this?
        $scope.displayedCollection = [].concat($scope.rowCollection);
        console.log("executed");
      }, 2000, true);

You could also do this as follows:

      setTimeout(function () {
        $scope.$apply(function () {
          $scope.rowCollection.push({firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'});
          // do I need this?
          $scope.displayedCollection = [].concat($scope.rowCollection);
        });
        console.log("executed");
      }, 2000);

edited Nov 23, 2016 at 22:14

answered Nov 23, 2016 at 22:06

2ps

16k2 gold badges34 silver badges53 bronze badges

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

1 Comment

Automatic Over a year ago

Thanks! And I have tested, I don't need $scope.displayedCollection = [].concat($scope.rowCollection);. Wonder why a lot of people on the internet added that line.

Collectives™ on Stack Overflow

Smart Table (AngularJs) async data change not updating

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related