angularjsng-classangularjs-ng-class

Add a class selectively to an ng-repeat AngularJS


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.

For example: (lets say nodes has 100 items)

<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

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

Solution

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

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