Question

修改：以下答案未考虑同时应用的+1功能。仍然在寻找如何让两者都成为现实。

我有一个ng-click功能，可以在ng-repeat中的按钮上调用，但每次单击其中一个按钮时，它会导致所有按钮上的类更改。

如何修复我的代码以使其只有被点击的按钮本身改变？

（请记住，数字工作正常，它只是一起改变的类。）

Angular控制器代码：

$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

所有按钮都绑定了相同的范围变量。因此，所有这些都改变的事实是正常行为。

如果您只想对点击的元素执行此操作，则应执行以下操作：

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

现在我们通过点击发送活动，这样我们就可以知道点击了哪个按钮。

在您的范围中，将以下内容添加到addHeart函数中：

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

这使您可以访问DOM中的当前元素并对其进行操作;）

修改

你的问题不够清楚，或者我的解释是错误的。无论哪种方式，我认为我理解你的需要，我们应该以不同的方式做到这一点。

如果我以正确的方式理解你的评论，那么你的json feed（或帖子来自的任何来源）的心数确实存在。

在这种情况下，您可以将ng-class与表达式一起使用：

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

我只为演示目的添加了逻辑测试。 post.hearts > 0?'red':'empty'您实际上不需要> 0部分，因为0表示false。

我们正在测试该帖子的心脏数是否超过0，在这种情况下它应该是红色的。如果您的双向绑定按预期工作，那么这也应该有效！

Answer 2

您需要创建一个数组并为每个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 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>

通过ng-click内部的ng-click进行角度ng-class

3 个答案: