Переключить класс с помощью ng-click на несколько элементов

Как я могу переключать классы по нескольким элементам по отдельности с помощью ng-click?

В этом вопросе qaru.site/info/161017/... переключение классов с щелчком было выполнено следующим образом:

CSS

.red {
    color: red;
}

JS:

$scope.toggle = false;

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

Но что, если у меня есть несколько кнопок, каждый из которых должен переключать свой собственный класс с помощью ng-click?

Если я настроил его таким образом:

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
<button id="btn2" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

Обе кнопки переключаются, если я нажимаю один.

Я знаю, что обходным путем является определение собственного события ng-click для каждой кнопки (f.ex toggle1 для кнопки1, toggle2 для кнопки2) - но это лучший способ?

Ответы

Ответ 1

Я сделал простую директиву для тестирования:

module.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

чтобы вы могли выбрать любой класс для переключения элементов

<button id="btn" toggle-class="active">Change Class</button>
<div toggle-class="whatever"></div>

Ответ 2

В зависимости от ваших требований вы можете использовать ng-repeat с массивом, представляющим переключатели. Например:

Ваше мнение:

<div ng-repeat="toggle in toggles">
    <button id="btn" ng-click="toggle.state = !toggle.state" ng-class="{'red' : toggle.state}">Change Class</button>
</div>

Внутри вашего контроллера:

$scope.toggles = [{ state: true }, { state: false }, { state: true }];

Таким образом вы можете расширить свою кнопку, просто обновив массив или внутренние объекты массива (если вам нужно больше сложности).

Ответ 3

внутри контроллера

 $scope.stateToggle=false;
$scope.togglelasses=function(){
     $scope.stateToggle= !$scope.stateToggle;
}

ввиду использования ng-class

 <button ng-click="togglelasses()" ng-class="stateToggle? 'active ': ' '">

добавьте ng-класс в каждый элемент, где вы хотите, чтобы класс был активным