将颜色更改为相同的元素 angular

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 可能在不同的摘要周期中有所不同（如果项目未排序），因此它是不可靠的

在每次 "ADD" 单击时添加一组 3 个按钮并使用 JS onclick:

<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，可能并不需要

将颜色更改为相同的元素 angular

change color to the same element angular

angularjs

angularjs-scope

ng-class