将颜色更改为相同的元素角度

Question

您好我有以下问题，当我点击一个项目时，所有元素的颜色都会改变，但我只需要改变我点击的颜色：

<div ng-app="myApp" ng-controller="myCtrl as model">
   <button ng-click="model.addComparative()"> add
        </button>  
 <div ng-repeat="item in model.items track by $index">
   <button ng-model="model.myModel" ng-click="model.changeColor()" ng-class="{'red':model.myModel==true}">click me</button>
</div> 

 angular
    .module("myApp",[])
    .controller('myCtrl', function($scope){
        var model=this;
        model.myModel=false;
        model.items=[];
        model.newItems = '';
        model.addComparative = function(){
            model.items.push(model.newItems)
        }
        model.changeColor = function(){
            model.myModel = true;
        }
  })

和密码笔：http://codepen.io/fernandooj/pen/rrdZWE

Answer 1

尝试使用每个项目的当前索引：

html 文件

<button ng-model="model.myModel" ng-click="model.changeColor(item)" ng-class="{'red':item.selected==true}">click me</button>

js 文件

model.addComparative = function(){
    model.items.push({}); // What you append needs to be an object.
}
model.changeColor = function(item){
    item.selected = true;
};

Answer 2

只需使用

<button ng-model="model.myModel" 
        ng-click="this.item.red=true" 
        ng-class="{'red':this.item.red}">click me</button>

ng-repeat 的 $index 可能会在不同的摘要周期之间变化（如果项目没有排序），因此它不可靠

在每次“添加”点击并使用 JS onclick 时添加一组 3 个按钮：

<div ng-app="myApp" ng-controller="myCtrl as model" ng-init="range=[0, 1, 2]">
  <button ng-click="model.addComparative()"> add </button>  
  <div ng-repeat="item in model.items track by $index+3">
    <button ng-repeat="i in range" 
            ng-model="model.myModel1" 
            onclick="this.style.background = 'red'">click me</button>
  </div>
</div>

还要注意，你所有的按钮都有相同的 ngModel，这可能不是我们想要的