在 ngRepeat 中仅更改一个元素的类答案

【问题标题】：Change class of just one element in an ngRepeat在 ngRepeat 中仅更改一个元素的类
【发布时间】：2017-03-21 21:35:13
【问题描述】：

我有一个 ng-repeat。而且我想更改该元素与整个组的类。

<button ng-class="defaultClass" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button>

在我的ng-click 上使用上面的 HTML，我可以通过管道，这实际上只给了我从 API 传递的数据，如果我在 console.log(this) 我看到一个名为 $$watchers 的元素中的类名，但这似乎奇怪的是从那里改变它。

$scope.toggleBtn = function (element) {
    console.log(element);
    console.log(this);
}

在我的控制器中，我有 $scope.defaultClass = "btn btn-off";，但如果我用函数更改它，它会更改每个元素。

我怎样才能只改变点击元素的类？

【问题讨论】：

这是你想做的：plnkr.co/edit/WKLJ45yRYu1583C2ZnfT ?
关闭，我需要它来切换
另外我在加载它们时需要一个不同的类，这就是我试图用$scope.defaultClass做的事情
所有按钮的切换类是否相同？
基本上他们需要使用“btn btn-off”加载，然后单击该元素时会更改为“btn btn-on”

标签： angularjs angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

从 cmets 继续。你不能为此使用 $scope 变量，因为正如你所说，它是一样的。要解决这个问题，您需要正确使用 ng-class。文档：https://docs.angularjs.org/api/ng/directive/ngClass（参见页面底部的示例）

<button ng-class="{'btn-on' : tube.toggled, 'btn-off' : !tube.toggled}" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button>

http://plnkr.co/edit/WKLJ45yRYu1583C2ZnfT?p=preview

【讨论】：

我有一个类似的问题，但我需要在单击不同项目时将所选按钮切换回其上一个类..

【解决方案2】：

我不确定我是否理解这是否是您想要的，但您可以使用：

<button class="btn" ng-repeat="tube in node.Tubes" ng-class="{'btn-off':!toggled, 'btn-on':toggled}" ng-click="toggled = !toggled">{{"Tube " + ($index + 1)}}</button>

在这种情况下无需向控制器添加任何代码。

【讨论】：

【解决方案3】：

这些其他答案非常好。但是，我想为此指出另一种方法。假设您正在循环浏览一组收据。例如，在控制器中，您在范围内有收据：

$scope.receipts = [ ... ];

在前端，您正在循环浏览这些收据：

<div ng-repeat="receipt in receipts">{{ receipt.[attribute] }}</div>

跟踪唯一类的一种方法是向收据对象添加“类”键。例如收据如下所示：

receipt { 'id': '1', 'class' : ' ... ' }

在前端，您将使用 ng-class 确定类：

<div ng-repeat="receipt in receipts">
     <div ng-class="receipt.class"></div>
</div>

然后，您可以将收据及其 ID 传递给 toggleButton() 方法，如下所示：

<div ng-repeat="receipt in receipts">
     <div class="btn" ng-click="toggleClass(receipt.id)"></div>
     <div ng-class="receipt.class"></div>
</div>

然后在控制器中，您可以简单地更新该特定收据的类（假设这里有一个方法 getReceipt() 从数组 $scope.receipts 获取收据）：

$scope.toggleClass = function(id) {
     getReceipt(id).class = { ... }
}

这将根据 toggleClass() 函数中的逻辑动态更改单张收据的类。

【讨论】：