Angular ng-Klasse über ng-klick innerhalb ng-repeat

Question

Bearbeiten: Die folgenden Antworten haben die + 1-Funktion, die ebenfalls angewendet wird, nicht berücksichtigt. Ich suche immer noch, wie ich beides machen kann.

Ich habe eine ng-click-Funktion, die auf einer Schaltfläche innerhalb einer ng-Wiederholung aufgerufen wird, aber jedes Mal, wenn eine der Schaltflächen angeklickt wird, bewirkt es, dass die Klasse auf allen Schaltflächen geändert wird.

Wie kann ich meinen Code reparieren, damit es nur die angeklickte Schaltfläche selbst ändert?

(Beachten Sie die Zahlen gut funktionieren, es ist nur die Klassen, die alle zusammen ändern.)

Der Winkel Controller-Code:

$scope.activeClass = false; 

$scope.addHeart = function(post){ 

    $scope.activeClass = !$scope.activeClass; 

    $scope.activeClass ? post.hearts += 1 : post.hearts -= 1; 

}; 

Und der HTML:

<button ng-class="{'red' : activeClass}" ng-click="addHeart(post)">{{post.hearts | number}}</button> 

Answer 1

Sie müssen ein Array erstellen und das Flag innerhalb des Arrays für jede ng-repeat-Zeile aktualisieren.

<div ng-repeat="node in nodes track by $index"> 
    <button ng-class="{'red' : activeClass[$index]}" ng-click="addHeart(post, $index)">{{post.hearts | number}}</button> 
</div> 

Js

$scope.activeClasses = []; 

$scope.addHeart = function(post, index){ 

    $scope.activeClasses[index] = !$scope.activeClasses[index]; 

    $scope.activeClasses[index] ? post.hearts += 1 : post.hearts -= 1; 

}; 

Answer 2

alle Schaltflächen sind den gleichen Umfang Variable gebunden. Die Tatsache, dass sich alle ändern, ist ein normales Verhalten.

Wenn Sie nur so für das geklickt Element tun Sie Folgendes tun sollten:

<button ng-click="addHeart($event)"></button> 

nun das Ereignis, das wir mit diesem Klick senden, die es uns ermöglichen wird zu wissen, welche Schaltfläche geklickt wurde . Folgendes Ihre addHeart Funktion

In Ihrem Umfang hinzu:

$scope.addHeart = function($event) { 
    angular.element($event.currentTarget).addClass('red'); 
} 

Auf diese Weise können Sie das aktuelle Element im DOM zugreifen und diese manipulieren;)

EDIT

Entweder Ihre Frage war nicht klar genug oder meine Interpretation war falsch. Wie auch immer, ich glaube, ich verstehe Ihre Bedürfnisse und wir sollten dies auf eine andere Weise tun.

Wenn ich Ihren Kommentar richtig verstanden habe, haben Sie die Anzahl der Herzen in Ihrem json-Feed (oder aus welcher Quelle die Beiträge stammen).

In diesem Fall könnten Sie ng-class mit einem Ausdruck verwenden:

<button ng-click="addHeart($event)" ng-class="post.hearts > 0?'red':'empty';"></button> 

Ich habe nur den logischen Test zu Demonstrationszwecken. post.hearts > 0?'red':'empty' Sie brauchen den > 0 Teil tatsächlich nicht, da 0 false bedeutet.

Wir testen, ob dieser Post mehr als 0 Herzen hat, in diesem Fall sollte es rot sein. Wenn Ihre Zweiwegbindung wie erwartet funktioniert, sollte das auch funktionieren!