Angularjs 使用ng单击在ng重复中更新ng类

当我单击ng click in ng repeat时，如何更新ng类

HTML

我已经试过了，但没用

更新

---

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

代码的问题是，对于集合中的所有元素，您使用的是相同的标志，即

$scope.color

。当此标志更改时，它会更改所有按钮的颜色

为了缓解这种情况，一种方法是使用一个数组，该数组在指定的索引处包含值

true

和

false

，并使用该数组确定模板中的类分配

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
$scope.y=[{
颜色：“r”
}, {
颜色：“”
}];
$scope.classes=[]；
$scope.changeColor=函数（c，i）{
如果（c）{
$scope.classes[i]=true；
}否则{
$scope.classes[i]=false；
}
}
});
.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

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

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


var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
$scope.y=[{
颜色：“r”
}, {
颜色：“”
}];
$scope.classes=[]；
$scope.changeColor=函数（c，i）{
如果（c）{
$scope.classes[i]=true；
}否则{
$scope.classes[i]=false；
}
}
});
.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

变色
您应该在元素上维护
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>

您应该在元素上维护
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>

@我更新一下。你遇到了什么问题？依我看，你的代码很好用。x、 颜色永远不会改变，这就是为什么x.color的初始值设置为$scope。color@31piy我只想更改按钮中的颜色。只单击了“不全部”按钮。@31piy我更新了它。您遇到了什么问题？依我看，你的代码很好用。x、 颜色永远不会改变，这就是为什么x.color的初始值设置为$scope。color@31piy我只想更改按钮中的颜色，只单击了按钮而不是所有按钮。我强烈建议不要使用
$index
，如果在
ng repeat
集合上应用过滤器，可能会造成伤害（
$index
可能因过滤条件不同而有所不同）。传递直接对象引用更合适。@PankajParkar--是的，这是一个有效的观点。由于OP没有指定源对象的太多细节，我不得不依赖索引，因为我不希望原始对象发生更改。我坚决不鼓励使用
$index
，如果在
上应用筛选器，可能会造成伤害ng repeat
collection（
$index
可能因不同的筛选条件而有所不同）。传递直接对象引用更合适。@PankajParkar--是的，这是一个有效点。由于OP没有指定源对象的太多详细信息，我不得不依赖索引，因为我不想更改原始对象。
<div ng-repeat="x in y">
  <button ng-class="{'red':color,'blue':!color}" ng-click="changeColor(x)">
    Change Color
  </button>
</div>

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