AngularJS：使用ng-repeat处理套接字数据的最佳方法

我对Socket.IO的实时数据很陌生。 我正在试图找出在AngularJS ng-repeat中处理来自Socket.IO的数据的最佳方法是什么？

现在我有后端发送整个数据结构每次有更新。

但是这会导致ng-repeat刷新以显示新的数据（如果我只对客户端的数据进行了任何修改，那么在下一次从后端发送数据时，它们将被删除）。 有一个更好的方法吗？

我是否应该过滤掉后端需要更新的唯一数据，然后将其发送到前端，而不是再次提交整个数据结构？ （但是，那么我将如何在只有更新数据的ng-repeat应用这个…）

我尝试在前端使用UnderscoreJS扩展方法，但它似乎导致ng-repeat的数据sorting问题（orderBy和筛选两个中断）。

我的具体使用案例是处理体育比分（数组中的几个比赛项目），我不断得到数据的更新，无论是比赛时间变化还是比赛得分。 更新几乎每秒都在发生。 我正在利用这个特定的API，并抓取一个特定的刷新variables的所有数据，然后通过套接字发送到前端。 不是真正使用套接字的理想情况，但它是迄今为止我发现的与API进行交互的唯一方法。

Answer 1

我认为最好是只发送给客户新的事件，而不是每次都发送给整个列表。 您可以将这些事件添加到数组，并让ng-repeat渲染它们。 下面是一个使用ngSocketIO的例子，它是我为Angular创build的一个简单的SocketIO模块（语法与我们已经使用的语法不会有太大的区别）：

 app.controller('MyCtrl', function($scope, socket) { $scope.events = []; socket.on('someEvent', function(data) { $scope.events.push(data); } } 

标记可能是这样的：

 <ul> <li ng-repeat="event in events">{{ event.name }}</li> </ul> 

现在，您可以更改events数组的任何对象，并且在下一个事件到达时不会被删除。 如果同一个事件可以再次发送（也许有新的数据），那么你可以用“散列”replace数组：

 app.controller('MyCtrl', function($scope, socket) { $scope.events = {}; socket.on('someEvent', function(data) { $scope.events[data.id] = data; } } 

ng-repeatexpression式需要稍微改变才能迭代一个散列：

 <li ng-repeat="(id, data) in events">{{id}}: {{data.name}}</li> 

在这种情况下，如果同一事件再次到达，则对事件的任何本地更改都将丢失。 如果要部分更新if的本地副本，则需要手动执行此操作，也许可以通过保存不希望丢失的部分，并在使用服务器中的新数据更新本地事件后进行恢复。

Answer 2

看看1.2中的这个新function：

http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm