AngularJS ngRepeat 更新模型

Question

我使用 ng-repeat 渲染一个 HTML 表格。我的控制器代码如下：

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时，我的表格不会重新渲染以显示新数据。

我该怎么解决这个问题？

- if __name__ is None

---

嗨，你知道怎么在ng-repeat列表的顶部添加一个项目吗？我可以更新我的列表-新的项目被渲染出来了，但它会放到列表的底部。 - lulu88

Answer 1

你是否将更新包装好了？

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

? 这应该能解决问题。

- lex82

---

此外，您可以在更改后添加 $scope.$apply()。 - Wyetro

Answer 2

当您更新列表时，可能需要调用$apply()来强制Angular执行一个脏检查循环，例如：

 WebSocket.start(function(data) {
   $scope.$apply(function(){
      /* your stuff goes here*/
    });
  });

- Maxim Shoustin

---

给我一个错误：Uncaught TypeError: Object #<Scope> has no method 'apply' - if __name__ is None

@JanNetherdrake，请查看此文章及其描述：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html - Maxim Shoustin

@JanNetherdrake，应该使用'$apply'，而不是'apply'。 - lex82

Answer 3

以下代码对我有效，每当您从套接字收到消息时，只需将您的代码绑定在$scope.$apply()函数内即可

 socket.on = function (e) {

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

        };

- Sachin Nikumbh