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 メッセージが my array にプッシュされます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].activeDOMの再描画を通して持続しないのか疑問に思っています(そしてそのactivecssクラスを保持します)。また、「状態」を維持する方法について誰かが解決策を持っている場合、それは素晴らしいことです。

通常、私はcssクラスを完全に失いますが、元の行が下にシフトされていても（一見ランダムに）元の行と同じ位置（2行目など）の新しい行に再表示されることがあります。 5 行目) に表示される新しい行は、追加されactiveたときに存在しませんでしactiveた。

例を投稿しますが、Plunkr も jsfiddle も NodeJS (WebSocket メッセージをプッシュする) をサポートしておらず、動作を示すために必要です。

解決

Alex's answerに基づいて、コントローラーを少し変更して 2 つ目の配列を追加しました。

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]います (この 2 番目の配列の唯一の目的は、誰が選択/アクティブであるかを記憶することであるため、プロパティは必要ありませんactive)。

4

1 に答える 1

2

items[$index].activeWebSocket の更新時に項目配列全体が上書きされるため、値が失われています。

選択したステータスを維持するには、影響を受けない別の変数にこれを保存する必要があります。

何かのようなもの：

コントローラ内

$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 に答える