2016-10-08 22 views
0

Hallo, ich habe folgendes Problem, wenn ich auf ein Element klicken Farbe auf alle Elemente ändert, aber ich brauche nur die Farbe zu ändern, die ich angeklickt:die Farbe wechseln, um das gleiche Element Winkel

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

und die codepen : http://codepen.io/fernandooj/pen/rrdZWE

+0

wegen Ihres Modells der Schaltfläche gewünscht wird. Was willst du eigentlich machen? – Aravind

Antwort

1

Versuchen Sie, den aktuellen Index der einzelnen Elemente mit:

html-Datei

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

js verwenden

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

Wenn Sie die Eigenschaft dieses Elements ändern, wird das gesamte Element einfacher als der Index übergeben. Vor allem, wenn irgendwelche Filter verwendet werden, weil Filter Indexierung – charlietfl

+0

o ja perfekt abwerfen, danke –

+0

Ich mache eine andere Frage, ist es möglich, dass der Wert des Index in einer anderen Zahl zu Null beginnen? –

0

nur

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

ng-repeat ‚s $ Index-Datei kann variieren zwischen den Zyklen zu verdauen (wenn Einzelteile nicht bestellt werden), so ist es nicht zuverlässig

Hinzufügen von 3 Tasten auf jedem "ADD" klicken und JS verwenden 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> 

auch beachten Sie, dass alle Ihre Tasten haben die gleiche ngModel, wahrscheinlich nicht

+0

danke für Ihre Antwort, ich habe Ihre Lösung getestet, aber wenn sie mehr Tasten waren, für jeden hinzufügen, und ich muss nur die Schaltfläche, die ich geklickt habe, ändern Farbe, aussehen: http://codepen.io/fernandooj/pen/rrdZWE –

Verwandte Themen