Question

当我点击ng-repeat中的ng-click时，如何更新ng-class？

HTML

<div ng-repeat="x in y">
  <button ng-class="{'red':color==true,'blue':color==false}" ng-click="changeColor(x.color)">
    Change Color
  </button>
</div>

脚本

$scope.changeColor = function(c){
  if(c){
    $scope.color = true;
  }else{
    $scope.color = false;
  }
}

我已经尝试this，但它无效。

更新

我只想更改点击按钮的颜色。

Answer 1

您的代码存在的问题是，对于集合中的所有元素，您使用相同的标记，即$scope.color。当此标志更改时，它会更改所有按钮＆＃39;颜色。

为了缓解这种情况，一种方法是在指定的索引处创建一个包含值true和false的数组，并使用该数组来决定模板中的类赋值。

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

  $scope.y = [{
    color: 'r'
  }, {
    color: ''
  }];
  
  $scope.classes = [];

  $scope.changeColor = function(c, i) {
    if (c) {
      $scope.classes[i] = true;
    } else {
      $scope.classes[i] = false;
    }
  }

});

＆＃13;

.red {
  color: red;
}

.blue {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="x in y track by $index">
    <button ng-class="{'red':classes[$index],'blue':classes[$index] !== undefined && !classes[$index]}" ng-click="changeColor(x.color, $index)">
    Change Color
  </button>
  </div>
</div>

＆＃13;

Answer 2

您应该在元素上维护color属性，而不是使用全局（单个）color属性来设置样式效果。我说要传递整个实体x来更改颜色方法，并在用户点击它时切换color属性。

<强> HTML

<div ng-repeat="x in y">
  <button ng-class="{'red':color,'blue':!color}" ng-click="changeColor(x)">
    Change Color
  </button>
</div>

OR

<div ng-repeat="x in y">
  <button ng-class="color ? 'red: 'blue'" ng-click="changeColor(x)">
    Change Color
  </button>
</div>

<强>代码

$scope.changeColor = function(c){
   c.color = !c.color;
}

使用ng-click更新ng-repeat中的ng-class

2 个答案: