6

<td>テーブルに ng-repeat があります。クリックするとクラスを追加し、クリックしないとクラスを削除できるようにしたいと考えています。<td>同時に複数選択できます。現在、すべての都市でクラスが適用されているか、または取得されていません。

例: (ノードに 100 個のアイテムがあるとします)

<tr ng-repeat node in nodes>
  <td>{{node.name}}</td>
  <td>{{node.date}}</td>
  <td ng-click="toggleMe( node.city )" ng-class"{clicked : isClicked()}" >{{node.city}}</td>
</tr>

私のJSで

$scope.cityArr = [];

$scope.toggleMe = function(city) {
  if ($scope.count > 0) {
    angular.forEach($scope.cityArr, function(value) {
      if (city === value) {
        $scope.clicked = false;
      } else {
        $scope.cityArr.push(city);
        $scope.clicked = true;
      }
    });
  } else {
    $scope.cityArr.push(city);
    $scope.clicked = true;
  }
  $scope.count = 1;
};

$scope.isClicked = function() {
  return $scope.clicked;
};
4

3 に答える 3

4

現在、clicked変更しているスコープには単一のプロパティがあり、すべてがそれを参照しています。clicked代わりにノードを装着してみてください...

$scope.toggleMe = function(node) {
  if ($scope.count > 0) {
    angular.forEach($scope.cityArr, function(value) {
      if (node.city === value) {
        node.clicked = false;
      } else {
        $scope.cityArr.push(node.city);
        node.clicked = true;
      }
    });
  } else {
    $scope.cityArr.push(node.city);
    node.clicked = true;
  }
  $scope.count = 1;
};

そして、ngRepeat...

<tr ng-repeat node in nodes>
  <td>{{node.name}}</td>
  <td>{{node.date}}</td>
  <td ng-click="toggleMe( node )" ng-class"{clicked : node.clicked}" >{{node.city}}</td>
</tr>
于 2014-05-12T21:22:16.120 に答える
4

これを実現するために特別な関数やコントローラーは必要ありません。

<table>
    <tbody>
        <tr ng-repeat="node in nodes">
            <td>{{node.name}}</td>
            <td>{{node.date}}</td>
            <td ng-click="node.highlight = !node.highlight" 
                ng-class="{ highlight: node.highlight }">
                {{node.city}}
            </td>
        </tr>
    </tbody>
</table>

完全なプランカーの例: http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv

私が使用したコントローラは、テスト データを除いて空であることを示すことができます。関数は必要ありません。

于 2014-05-12T21:27:47.773 に答える