I have an ng-repeat for a table, I want to be able to add a class when <td> is clicked, and remove the class when un-clicked. Multiple <td> can be selected at the same time. Right now ALL of the cities are or are not getting the class applies.

我有一个表的ng-repeat,我希望能够在单击时添加一个类,并在单击时删除该类。可以同时选择多个。现在所有的城市都适用或不适用。

For example: (lets say nodes has 100 items)

例如:(假设节点有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>

in my JS

在我的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;
};

3 个解决方案

#1

Right now there is a single clicked property on the scope that you're changing and everything refers to that. Try to put clicked on the node instead...

现在,您正在更改的范围上有一个单击的属性,所有内容都指向该属性。尝试点击节点而不是......

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

And in the ngRepeat...

并在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>

#2

You don't need a special function or controller to accomplish this:

您不需要特殊功能或控制器来完成此任务:

<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>

Full Plunker example: http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv

Full Plunker示例:http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv

I could show you the controller I used by it's empty except for the test data. You don't need a function.

我可以告诉你我使用的控制器是空的,除了测试数据。你不需要一个功能。

#3

Alternately, the code can use a separate array and $index to set classes:

或者,代码可以使用单独的数组和$ index来设置类:

<tr ng-repeat="node in nodes"
    ng-class="{ highlight: highlightRows[$index] }">
  <td class="x" ng-click="toggleHighlight($index)">
    X
  </td>

This approach is useful if you want to separate Model data from View data.

如果要将模型数据与View数据分开,则此方法很有用。

The DEMO

angular.module("app", [])
.controller("TestController", function($scope) {
  $scope.highlightRows = [];
  $scope.toggleHighlight = function(idx) {
      $scope.highlightRows[idx] = !$scope.highlightRows[idx];
  };
  $scope.nodes = [
    { name: "Alpha", date: new Date(), city: "Omaha" },
    { name: "Bravo", date: new Date(), city: "New York" },
    { name: "Charlie", date: new Date(), city: "Minneapolis" }
  ];
})

table {
  border-collapse: collapse;
  font-family: sans-serif;
}
td {
  padding: 5px;
  border: solid black 1px;
}
.x {
  cursor: pointer;
}
.highlight {
  background: yellow;
}

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="TestController">
    <table>
     <h3>Click on X to highlight</h3>
      <tbody>
        <tr ng-repeat="node in nodes"
            ng-class="{ highlight: highlightRows[$index] }">
          <td class="x" ng-click="toggleHighlight($index)">
            X
          </td>
          <td>{{node.name}}</td>
          <td>{{node.date | date}}</td>
          <td>{{node.city}}</td>
        </tr>
      </tbody>
    </table>
    highlightRows={{highlightRows}}
</body>

#1

Right now there is a single clicked property on the scope that you're changing and everything refers to that. Try to put clicked on the node instead...

现在,您正在更改的范围上有一个单击的属性,所有内容都指向该属性。尝试点击节点而不是......

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

And in the ngRepeat...

并在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>

#2

You don't need a special function or controller to accomplish this:

您不需要特殊功能或控制器来完成此任务:

<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>

Full Plunker example: http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv

Full Plunker示例:http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv

I could show you the controller I used by it's empty except for the test data. You don't need a function.

我可以告诉你我使用的控制器是空的,除了测试数据。你不需要一个功能。

#3

Alternately, the code can use a separate array and $index to set classes:

或者,代码可以使用单独的数组和$ index来设置类:

<tr ng-repeat="node in nodes"
    ng-class="{ highlight: highlightRows[$index] }">
  <td class="x" ng-click="toggleHighlight($index)">
    X
  </td>

This approach is useful if you want to separate Model data from View data.

如果要将模型数据与View数据分开,则此方法很有用。

The DEMO

angular.module("app", [])
.controller("TestController", function($scope) {
  $scope.highlightRows = [];
  $scope.toggleHighlight = function(idx) {
      $scope.highlightRows[idx] = !$scope.highlightRows[idx];
  };
  $scope.nodes = [
    { name: "Alpha", date: new Date(), city: "Omaha" },
    { name: "Bravo", date: new Date(), city: "New York" },
    { name: "Charlie", date: new Date(), city: "Minneapolis" }
  ];
})

table {
  border-collapse: collapse;
  font-family: sans-serif;
}
td {
  padding: 5px;
  border: solid black 1px;
}
.x {
  cursor: pointer;
}
.highlight {
  background: yellow;
}

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="TestController">
    <table>
     <h3>Click on X to highlight</h3>
      <tbody>
        <tr ng-repeat="node in nodes"
            ng-class="{ highlight: highlightRows[$index] }">
          <td class="x" ng-click="toggleHighlight($index)">
            X
          </td>
          <td>{{node.name}}</td>
          <td>{{node.date | date}}</td>
          <td>{{node.city}}</td>
        </tr>
      </tbody>
    </table>
    highlightRows={{highlightRows}}
</body>

秒客网

有选择地将类添加到ng-repeat AngularJS中

3 个解决方案

#1

#2

#3

The DEMO

#1

#2

#3

The DEMO

相关文章