Question

我有一个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)我在一个名为{{的元素中看到了类名1}}但是从那里改变它似乎很奇怪。

$$watchers

在我的控制器中我有$scope.toggleBtn = function (element) { console.log(element); console.log(this); }但如果我用该功能改变它，它会改变每个元素。

我怎样才能更改单击元素的类？

Answer 1

继续发表评论。你不能使用$ 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

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

在这种情况下，

无需向控制器添加任何代码。

Answer 3

这些其他答案非常好。但是，我想指出另一种方法。让我们说你正在循环收集一系列收据。例如，在控制器中，您有范围内的收据：

$scope.receipts = [ ... ];

在前端你正在浏览这些收据：

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

跟踪唯一班级的一种方法是添加一个＆＃34;类＆＃34;收据对象的关键。例如，收据看起来像：

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（）函数中的逻辑动态更改该单个收据的类。

更改ngRepeat中仅一个元素的类

3 个答案: