Модель обновления AngularJS ngRepeat

Я использую ng-repeat для рендеринга html table. Мой контроллер выглядит так:

app.controller("fooCtrl", function($scope, WebSocket) {
  $scope.foo = [ ... ];

  WebSocket.start(function(data) {
    // this is a callback on websocket.onmessage
    // here is a for loop iterating through $scope.foo objects and updating them
  });
});

Как видите, я периодически обновляю массив $scope.foo. Однако мое представление построено так:

<tr ng-repeat="item in foo">
  ...
</tr>

Проблема в том, что когда я обновляю foo, моя таблица не перерисовывается с новыми данными.

Как бы я поступил с этой проблемой?


person if __name__ is None    schedule 15.12.2013    source источник
comment
Привет, возможно, ты знаешь, как добавить элемент в начало списка ng-repeat? Я могу обновить свой список - новый элемент отображается, но он идет в конец списка.   -  person lulu88    schedule 04.07.2014


Ответы (3)


Вы запаковали обновление в

$scope.$apply(function() {
  // update goes here
});

? Это должно решить проблему.

person lex82    schedule 15.12.2013
comment
Кроме того, вы можете просто добавить $scope.$apply() после изменений. - person Wyetro; 21.07.2015

Вероятно, вам нужно вызвать $apply(), чтобы заставить angular выполнять цикл дайджеста при обновлении списка, например:

 WebSocket.start(function(data) {
   $scope.$apply(function(){
      /* your stuff goes here*/
    });
  });
person Maxim Shoustin    schedule 15.12.2013
comment
Выдает ошибку: Uncaught TypeError: Object #<Scope> has no method 'apply' - person if __name__ is None; 16.12.2013
comment
@JanNetherdrake, пожалуйста, посмотрите эту статью с описанием: jimhoskins.com/2012/ 17/12/angularjs-and-apply.html - person Maxim Shoustin; 16.12.2013
comment
@JanNetherdrake Это «$ применить», а не «применить». - person lex82; 16.12.2013

Следующий код работает для меня. Всякий раз, когда вы получаете сообщение из сокета, вам просто нужно связать свой код внутри функции $scope.$apply()

 socket.on = function (e) {

            $scope.$apply(function () {
               // update you UI over here
            });

        };
person Sachin Nikumbh    schedule 19.07.2016