CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Danny
Danny

Reputation: 692

Update object property in ng-repeat

I'm using ng-repeat to represent my objects. Example:

<div ng-repeat="item in items | orderBy: 'label' | filter:query | orderBy: 'label'">
  <h1>{{item.label}}</h1>
  <h1>{{item.property}}</h1>
</div>

Also I'm using socket.io. So, when property of one of the objects is updated, my back-end will send socket.io event with this object and i will catch it in my AngularJS Ctrl.

  socket.on('itemPropertyUpdated', function(item){
      // Update property of this item in ng-repeat
    });

My question is: How i can update property of one of the objects represented in ng-repeat ? I mean, how i can update <h1>{{item.property}}</h1> without reloading all items array.

(The property of the objects will updated with frequency because it is the "state (on/off)" of each object.)

Upvotes: 1

Views: 807

Answers (2)

Meligy
Meligy

Reputation: 36594

If you have a reference to the scope:

  socket.on('itemPropertyUpdated', function(item){
      // Update property of this item in ng-repeat
      someObject.someProperty = someValue;
      scope.$evalAsync();
    });

If you don't, you can call angular.element(someDomElement).scope() to get it.

Upvotes: 0

Michael Kang
Michael Kang

Reputation: 52837

Events outside of AngularJS need to have an $apply. This tells angular to apply a digest cycle to update the view.

socket.on('itemPropertyUpdated', function(item){
   $scope.$apply(function() {
      // Update property of this item in ng-repeat
   });
});

Upvotes: 1

Related Questions