有选择地向ng-repeat AngularJS添加一个类

发布时间：2020-12-17 10:34:30 所属栏目：安全来源：网络整理

导读：我有一个表的ng-repeat,我希望能够在 td时添加一个类.单击,并在取消单击时删除该类.多个 td可以同时选择.现在所有的城市都适用或不适用. 例如:(假设节点有100个项目) tr ng-repeat node in nodes td{{node.name}}/td td{{node.date}}/td td ng-click="toggle

我有一个表的ng-repeat,我希望能够在< td>时添加一个类.单击,并在取消单击时删除该类.多个< 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;
};

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!