web-dev-qa-db-ja.com

複数の要素をng-クリックしてクラスを切り替える

Ng-clickで複数の要素のクラスを個別に切り替えるにはどうすればよいですか？

この質問で https://stackoverflow.com/a/22072110/2169327 クリックでクラスを切り替えることは次のように行われました：

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イベントを定義することです（button1のf.ex toggle1、button2のtoggle2）-これが最善の方法ですか？

angularjsangularjs-ng-click
34
bjornasm

テスト用の簡単なディレクティブを作成しました：

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>
64
Zombi

要件に応じて、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 }];

この方法では、配列または内部配列オブジェクトを更新するだけでボタンセットを拡張できます（より複雑な場合があります）。

18
Matt Way

内部コントローラー

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

ビューではng-classを使用します

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

クラスをアクティブにするすべての要素にng-classを追加します

1
rishabh