1

我有一个表，其行通过一些模型数据循环。单击表格单元格时，该行的所有单元格都会切换.active（背景变为红色）。这很好用（尽管我最终会添加一个更复杂的检查器，.active从所有行的兄弟姐妹中删除）。但是，我的表正在通过更新模型并导致重新绘制表的 WebSocket 推送/消息接收数据。发生这种情况时，我的“选择”就会丢失。

<tr ng-repeat="item in items | orderBy:'time':true">
  <td
    ng-click="items[$index].active =! items[$index].active"
    ui-refresh="items[$index].active"
    ui-jq="toggleClass"
    ui-options="'active'"
  >{{item.time | date:'hh:mm a'}}</td>
  <td
    ng-click="items[$index].active =! items[$index].active"
    ui-refresh="items[$index].active"
    ui-jq="toggleClass"
    ui-options="'active'"
  >
    <a href="#/items/details/{{item.id}}">{{item.name}}</a>
  </td>
</tr>

在我的控制器中，新的 WebSocket 消息被推送到我的数组中items：

function Items($scope , WebSocket)
{
  $scope.items = [];

  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);
  });
}

所以我想知道为什么items[$index].active不通过 DOM 重新绘制（并保留其activecss 类）。此外，如果有人对我如何坚持我的“状态”有解决方案，那就太好了。

通常我会完全松开 css 类，但有时（看似随机）它会重新出现在与原始行相同的表格位置（例如第二行）的新行上，即使原始行已向下移动（到那么第 5 行是什么），并且添加active时出现的新行不存在active。

我会发布一个示例，但是 Plunkr 和 jsfiddle 都不支持 NodeJS（它会推出 WebSocket 消息）并且对于演示该行为是必要的。

解决方案

根据Alex 的回答，我稍微修改了我的控制器以添加第二个数组：

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);
  });
}

在我的模板中，交换items[$index].active了rowSelection[$index]（因为第二个数组的唯一目的是记住谁被选中/激活，它不需要active属性）。

4

1 回答 1

2

您正在丢失其中的值，items[$index].active因为当 WebSocket 更新时整个项目数组被覆盖。

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

就像是：

在控制器中

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

在指令/模板中

  <td
    ng-click="itemStatus[item.id].active =! itemStatus[item.id].active"
    ui-refresh="itemStatus[item.id].active"
于 2013-02-19T01:52:48.927 回答