通过 ng-repeat 中的 ng-click 生成 Angular ng-class [英] Angular ng-class via ng-click inside ng-repeat

问题描述

下面的答案没有考虑到也正在应用的 +1 功能.仍在寻找如何让这两者都发生.

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.

我有一个 ng-click 函数，它在 ng-repeat 中的一个按钮上调用，但是每次单击一个按钮时，它都会导致所有按钮上的类发生变化.

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.)

Angular 控制器代码:

The Angular controller code:

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

推荐答案

您的所有按钮都绑定到相同的范围变量.因此，所有这些都发生变化是正常行为.

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.

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

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

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

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

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

编辑

要么你的问题不够清楚，要么我的解释有误.无论哪种方式，我想我都理解您的需求，我们应该以不同的方式做到这一点.

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.

如果我以正确的方式理解您的评论，那么您的 json 提要(或帖子的任何来源)中确实有红心数.

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).

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

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

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

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

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.

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

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 !

这篇关于通过 ng-repeat 中的 ng-click 生成 Angular ng-class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！