Javascript AngularJS在模型更新期间丢失了css类（DOM重新绘制）

我有一个表，它的行循环通过一些模型数据。单击表格单元格后，该行的所有单元格将切换为

.active

（背景变为红色）。这很好（尽管我最终会添加一个更复杂的检查器，从行的所有同级中删除

.active

）。但是，我的表通过WebSocket推送/消息接收数据，这些推送/消息更新模型并导致重新绘制表。当这种情况发生时，我的“选择”将丢失

所以我想知道为什么

items[$index].active

不能通过DOM重新绘制（并保留其

active

css类）持久化。另外，如果有人能解决我如何坚持我的“状态”，那就太好了

通常我会完全释放css类，但有时（看起来是随机的）它会重新出现在表格中与原始行相同位置的新行上（比如第二行），即使原始行已下移（到第五行）添加

active

时，

active

显示的新行不存在

我将发布一个示例，但Plunkr和JSFIDLE都不支持NodeJS（推出WebSocket消息），这是演示行为所必需的

解决方案 基于，我稍微修改了控制器以添加第二个阵列：

function Items($scope , WebSocket)
{
  $scope.items = [];
  $scope.rowSelection = [];// <- THIS IS NEW

  WebSocket.on('items', function(data)
  {// receive a bunch of items onload
    $scope.items = data.items;
  });

  WebSocket.on('item', function(data)
  {// receive subsequent items as they are pushed
    $scope.items.push(data.item);
  });
}

功能项（$scope，WebSocket）
{
$scope.items=[]；
$scope.rowSelection=[]；//您正在丢失
items[$index]中的值。由于WebSocket更新时整个items数组被覆盖，因此处于活动状态

要保持选定状态，应将其存储在不受影响的单独变量中

比如：

内部控制器

$scope.items = [];
$scope.itemStatus = [];

在指令/模板中

  <td
    ng-click="itemStatus[item.id].active =! itemStatus[item.id].active"
    ui-refresh="itemStatus[item.id].active"

切换行而不是让每个单元格管理同一件事不是更有意义吗？@charlietfl，是的，它会。除了引导将背景颜色应用于表格单元格而不是行之外：（根据行上的活动类调整单元格的css并不难……对于script@charlietfl，对不起，我不明白你说的话（'根据行上的活动类调整单元格的css并不难'）；你是说我想做的并不困难吗？我是说更改boootstrap应用的css非常简单。我原本以为我的整个数组都在重写，但当我再次查看控制器时，我记得第二个函数（处理后续推送）只会添加到数组：
$scope.items.push（data.item）；
。此外，您的建议会导致TypeError:
TypeError:无法设置未定义的属性“active”，因为
itemStatus[item.id]
在设置对象的某个属性之前，不会将其定义为对象。为了解决此问题，我删除了
active
属性。请参阅使用我实现的解决方案更新的问题。
$scope.items = [];
$scope.itemStatus = [];

  <td
    ng-click="itemStatus[item.id].active =! itemStatus[item.id].active"
    ui-refresh="itemStatus[item.id].active"