选择添加类的NG-重复AngularJS [英] Add a class selectively to an ng-repeat AngularJS

问题描述

我有一个NG重复一个表，我希望能够添加一个类时，＆LT; TD＆GT; 点击，和未在删除类点击。多个＆LT; TD＆GT; 可以在同一时间选择。现在所有的城市都还是没有得到类应用。

例如：（可以说具有节点100项）

 ＆LT;中的节点＆GT TR纳克重复节点;
  ＆所述; TD＆GT; {{node.name}}＆下; / TD＆GT;
  ＆所述; TD＆GT; {{node.date}}＆下; / TD＆GT;
  ＆LT; TD NG点击=toggleMe（node.city）NG级{点击：isClicked（）}＆GT; {{node.city}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
 

在我的JS

  $ scope.cityArr = [];$ scope.toggleMe =功能（市）{
  如果（$ scope.count大于0）{
    angular.forEach（$ scope.cityArr，功能（价值）{
      如果（市===值）{
        $ scope.clicked = FALSE;
      }其他{
        $ scope.cityArr.push（市）;
        $ scope.clicked = TRUE;
      }
    }）;
  }其他{
    $ scope.cityArr.push（市）;
    $ scope.clicked = TRUE;
  }
  $ scope.count = 1;
};$ scope.isClicked =功能（）{
  返回$ scope.clicked;
};
 

解决方案

现在有一个点击上你改变，一切都指的是财产范围那。尝试把点击的节点上，而不是...

  $ scope.toggleMe =功能（节点）{
  如果（$ scope.count大于0）{
    angular.forEach（$ scope.cityArr，功能（价值）{
      如果（node.city ===值）{
        node.clicked = FALSE;
      }其他{
        $ scope.cityArr.push（node.city）;
        node.clicked = TRUE;
      }
    }）;
  }其他{
    $ scope.cityArr.push（node.city）;
    node.clicked = TRUE;
  }
  $ scope.count = 1;
};
 

而在 ngRepeat ...

 ＆LT;中的节点＆GT TR纳克重复节点;
  ＆所述; TD＆GT; {{node.name}}＆下; / TD＆GT;
  ＆所述; TD＆GT; {{node.date}}＆下; / TD＆GT;
  ＆LT; TD NG点击=toggleMe（节点）NG级{点击：node.clicked}＆GT; {{node.city}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
 

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

解决方案

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>

这篇关于选择添加类的NG-重复AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！