Angular ng-class via ng-click inside ng-repeat

问题

Edit: The answers below haven't taken into account the +1 function that is also being applied. Still looking for how I can make both happen.

I have an ng-click function that is called on a button within an ng-repeat, but each time one of the buttons is clicked it causes the class to change on all the buttons.

How can I fix my code to make it so only the clicked button itself changes?

(Keep in mind, the numbers work fine, it's just the classes that change all together.)

The Angular controller code:

$scope.activeClass = false;

$scope.addHeart = function(post){

    $scope.activeClass = !$scope.activeClass;

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

};

And the HTML:

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

回答1:

All of your buttons are bound the same scope variable. So the fact that all of them change is a normal behaviour.

If you only want to do so for the clicked element you should do the following:

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

Now we are sending the event with that click which will enable us to know which button has been clicked.

In your scope, add the following to your addHeart function:

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

This lets you access the current element in the DOM and manipulate it ;)

EDIT

Either your question was not clear enough or my interpretation was wrong. Either way, I think I understand your need and we should do this in a different way.

If I understood your comment the right way, you do have the number of hearts in your json feed (or whatever source the posts are coming from).

In that case, you might use ng-class with an expression:

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

I only added the logical test for demonstration purposes. post.hearts > 0?'red':'empty' You actually don't need the > 0 part since 0 means false.

We are testing if that post has more than 0 hearts, in which case it should be red. If your two-way-binding works as expected, this should work as well !

回答2:

You need to create an array and update the flag inside the array for each ng-repeat row.

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

};

回答3:

<div ng-repeat="x in y">
  <button ng-class="{'red':applyColor==true,'blue':applyColor==false}" ng-click="applyColor = x.color ? true : false;">
    Change Color
  </button>
</div>

来源：https://stackoverflow.com/questions/41672968/angular-ng-class-via-ng-click-inside-ng-repeat