Изменить класс только одного элемента в ngRepeat

Question

У меня есть ng-repeat. И я хотел бы изменить класс только этого элемента против всей группы.

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

с выше HTML на моем ng-click я могу передать трубку, которая на самом деле только дает мне данные, передаваемые из API, если я console.log(this) я вижу имя класса в элементе называется $$watchers, но это кажется странным измените его оттуда.

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

В моем контроллере у меня есть $scope.defaultClass = "btn btn-off";, но если я изменить это с помощью функции она изменяет каждый элемент.

Как я могу изменить только класс элемента?

Answer 1

Продолжая из комментариев. Чем вы не можете использовать переменную $ scope для этого, потому что, как вы сказали, она будет такой же. Чтобы решить эту проблему, вам нужно правильно использовать ng-класс. Docs: 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> 

Один способ следить за уникальных классов, чтобы добавить ключ класса к объектам квитанции. Например, получение будет выглядеть так:

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

На переднем конце, вы бы определить класс, используя нг-класс:

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

И потом, вы могли бы передать квитанцию ​​и его идентификатор метод ToggleButton() следующим образом:

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

А потом внутри контроллера можно просто обновить класс для конкретного приема (при условии, здесь есть метод getReceipt(), который получает квитанцию ​​из массива $ объема .receipts):

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

Это динамически изменять класс для этой единой квитанции на основе логики внутри функции toggleClass().