如何在AngularJS的ng-repeat中通过ng-click更新单个按钮的ng-class？

嘿，这个问题我之前也碰到过！你现在的问题出在全局的$scope.color变量——所有循环里的按钮都绑定了同一个变量，所以点任何一个都会触发所有按钮的样式变化。咱们得给每个按钮单独存自己的状态才行，具体改法如下：

核心思路 #

把颜色状态从全局的$scope变量，转移到ng-repeat循环的每个独立对象上，这样每个按钮只对应自己的状态，不会互相干扰。

修改后的代码 #

HTML部分 #

把ng-class绑定到当前循环项的属性（比如x.isActive），同时点击事件直接传递当前循环对象：

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

Script部分 #

修改点击事件的处理函数，直接切换传入对象的状态属性：

$scope.toggleColor = function(item) {
  // 初始化状态（避免第一次点击时undefined的问题）
  if (item.isActive === undefined) {
    // 如果需要用原来的x.color作为初始状态，就改成 item.isActive = !item.color;
    item.isActive = false;
  } else {
    item.isActive = !item.isActive;
  }
}

额外优化（可选） #

如果你的x.color是用来设置初始颜色状态的，可以在控制器初始化时给每个循环项赋值：

// 遍历数组，用原有color值初始化每个item的isActive状态
angular.forEach($scope.y, function(item) {
  item.isActive = item.color;
});

这样每个按钮的初始颜色就和你原来的逻辑一致，点击时也只会切换自己的样式啦！

内容的提问来源于stack exchange，提问作者Pure Rhymer Organization