角纳克级的NG-点击里面NG-重复

编辑：下面这些问题的答案都没有考虑到，也被应用的+1功能。仍然在寻找如何让这两件事情发生。角纳克级的NG-点击里面NG-重复

我有一个被称为上NG-重复内的按钮的NG-点击功能，但每一个按钮被点击它时会导致类来改变所有的按钮。

如何解决我的代码，使其因此只有点击的按钮本身的变化？

（请记住，这些数字做工精细，它只是改变一起的类。）

的角度控制器代码：

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

来源

2017-01-16 Elias Ghosn

对于所有按钮，全局都可以访问'activeClass'。尝试根据索引使其独立。 –

答案中提供了两个选项，尽管可能还有更多选项。如果没有人适合，请编辑您的帖子以解释您是否有特定需求！ – YannickHelmut

如果您希望单次选择，请尝试https://jsfiddle.net/U3pVM/29445/。 –

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

};

来源

2017-01-16 09:28:50

控制器中伴随的JS看起来会是什么样子？ –

我已更新答案。 –

你的所有按钮都绑定到的范围变量。所以他们全部改变的事实是一种正常的行为。

如果你只是想为你应该做到以下几点点击的元素做到：

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

现在我们正在发送与点击的事件，这将使我们能够知道这按钮被点击。

在你的范围，以下内容添加到您的addHeart功能：

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

这使您可以访问当前元素在DOM和操纵它;）

编辑

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

如果我理解您的评论的正确途径，你有你的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的心，在这种情况下，它应该是红色。如果你的双向绑定按预期工作，这应该也能工作！

来源

2017-01-16 09:29:20 YannickHelmut

好的一芽，欢呼 –

好的，但如果我这样做，那么它打破了数字添加功能。我怎样才能切换类，并在同一时间只在一个目标上添加数字？ –

您也可以将两个参数传递给函数：addHeart（$ event，post）{}并在其中执行两个参数。这完全取决于你！ – YannickHelmut

角纳克级的NG-点击里面NG-重复

回答

相关问题