Угловой ng-класс через ng-click внутри ng-repeat

Question

Редактировать: В ответах ниже не учтена функция +1, которая также применяется. Все еще ищу, как я могу это сделать.

У меня есть функция ng-click, вызываемая кнопкой внутри ng-repeat, но каждый раз, когда нажимается одна из кнопок, это вызывает изменение класса на всех кнопках.

Как я могу исправить свой код, чтобы его можно было изменить, только сама кнопка клика?

(Имейте в виду, что номера работают нормально, это просто классы, которые меняют все вместе.)

Угловое код контроллера:

$scope.activeClass = false; 

$scope.addHeart = function(post){ 

    $scope.activeClass = !$scope.activeClass; 

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

}; 

И HTML:

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

Answer 1

Вам нужно создать массив и обновить флаг внутри массива для каждой строки ng-repeat.

<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

Все ваши кнопки связаны с той же области видимости переменных. Поэтому тот факт, что все они меняются, - это нормальное поведение.

Если вы хотите сделать это для щелкнули элемента вам необходимо сделать следующее:

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

Теперь мы направляем событие с этим щелчком, который позволит нам знать который кнопка была нажата ,

В Вашей области, добавьте следующие строки в функции addHeart:

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

Это позволяет получить доступ к текущему элементу в DOM и управлять ею;)

EDIT

Либо ваш вопрос был недостаточно ясным, или моя интерпретация была неправильной. В любом случае, я думаю, я понимаю вашу потребность, и мы должны делать это по-другому.

Если я правильно понял ваш комментарий, у вас есть количество сердец в вашем корму json (или независимо от того, откуда отправляются сообщения).

В этом случае, вы можете использовать ng-class с выражением:

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

Я только добавил логический тест для демонстрационных целей. post.hearts > 0?'red':'empty' На самом деле вам не нужна часть > 0 с 0 означает false.

Мы тестируем, если у этого сообщения больше 0 сердец, и в этом случае он должен быть красным. Если ваша двусторонняя привязка работает так, как ожидалось, это тоже должно работать!