AngularJS: ng-repeat doesn't refresh after updating array

Question

I'm using Ionic framework, and trying to display a list of "Card" elements using the following HTML code:

<div ng-repeat="case in cases">

    <div class="list card">

      <div class="item item-avatar">
        <button ng-click="rmpost(card.key)" style="background: transparent; border: none;"><i class="icon ion-close-round"></i></button><!--if (dataSnapshot.val().volunteer_email == firebase.auth().currentUser.email)-->
        <h2>{{card.volunteer_name}} ({{card.volunteer_email}})</h2>
        <p>{{card.title}} ({{card.creationdate}})</p>
      </div>

      <div class="item item-body">
        <img class="full-image" src={{card.snapshot}}>
        <p>{{card.message}}</p>
      </div>

    </div>

      </div>

This is my JS code used inside the controller for updating the cases array:

.controller('campaignslookCtrl', function($rootScope, $scope, $cordovaGeolocation, $state, $ionicPopup, Util)
        {
            $scope.reload = function()
            {
            $scope.reload();
            }

            $scope.rmpost = function(key)
            {
              alert("rmpost");
            }

            $scope.cases = [];

            //...

    firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {

            $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});

});
//..
})

The $scope.cases got well displayed when being initialized to a constant value, but when being dynamically updated (via $push) nothing gets displayed.

It looks like your code is missing some crucial details. How is the dataSnapshot variable obtained? — JLRishe
– JLRishe, Commented Jun 20, 2016 at 15:14
Where are you pushing the new object array? I made a simple example with a timeout. jsfiddle.net/Lvc0u55v/5652 — Stubbies
– Stubbies, Commented Jun 20, 2016 at 15:27

Joel · Accepted Answer · 2016-06-20 15:43:11Z

2

The problem is that you're updating your model outside of the angular context. The data has changed, but angular hasn't run it's own internal digest and hasn't been made aware that any changes have occurred within your model.

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot) //FIREBASE EVENT NOT WITHIN ANGULAR CONTEXT

You need to use angular's $scope.$apply method.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

$apply([exp]); $apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

Here's how to use $scope.$apply to get into a valid angular context and then update the data:

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function() {
                    //we are now within the angular context, so any updates to the model with be handled correctly
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});
                });
});

You could theoretically call $scope.$digest manually, but this isnt' recommended according to the angular docs. $apply forwards exceptions correctly and also allows watchers to be processed. It's generally better to use this method than handling $digest on your own.

$digest(); Processes all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10.

Usually, you don't call $digest() directly in controllers or in directives. Instead, you should call $apply() (typically from within a directive), which will force a $digest().

edited Jun 20, 2016 at 15:43

answered Jun 20, 2016 at 15:29

Joel

2,2671 gold badge20 silver badges24 bronze badges

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

7 Comments

user6039980 Over a year ago

After trying that: I'm getting blank data displayed instead of the data inside dataSnapshot.val().*.

Joel Over a year ago

@user6039980 should be working - any errors in your console?

user6039980 Over a year ago

Sorry, but your answer is perfect. I MindlessIy forgot to rename {{card.*}} to {{case.*}}, and that what caused the problem. Thanks a lot, that helps.

user6039980 Over a year ago

I just want to add that the button ng-click doesnt work.

Joel Over a year ago

@user6039980 glad to be of help! Unfortunately there's not enough information in your question to troubleshoot the ng-click problem. I'd suggest you open an additional question for this issue with additional details.

|

MaKCbIMKo · Accepted Answer · 2016-06-20 15:25:08Z

You need to wrap your push call in $apply method. Because you're adding in to your array item from the outside of angular scope (from the firebase callback).

Try the following:

...
firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function () {
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});

                 });
             });
...

Ale Lan · Accepted Answer · 2016-06-20 15:29:15Z

1

Same answer that MaKCbIMKo.

I would add that there is this easier-to-read alternative :

$scope.cases.push({key: dataSnapshot.key,
                                 volunteer_name: dataSnapshot.val().volunteer_name,
                                 volunteer_email: dataSnapshot.val().volunteer_email,
                                 title: dataSnapshot.val().title,
                                 creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                 snapshot: dataSnapshot.val().snapshot,
                                 message: dataSnapshot.val().message});

$scope.digest();

answered Jun 20, 2016 at 15:29

Ale Lan

292 bronze badges

Collectives™ on Stack Overflow

AngularJS: ng-repeat doesn't refresh after updating array

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related