通过ng-repeat内ng-click进行角度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进行角度ng-class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！