web-dev-qa-db-ja.com

AngularJSでクラスを追加および削除する方法は？

スイッチャーのように機能するボタンがいくつかあります。 1つをクリックするとアクティブになり、他のボタンを「シャットダウン」します。 jQueryを使用してこれを行いましたが、AngularJSを使用したいと思います。これが私のコードです：

[〜＃〜] html [〜＃〜]

<div class="button-bar">
    <a class="button button-energized" id="weak">weak</a>
    <a class="button button-energized" id="normal">normal</a>
    <a class="button button-energized" id="strong">strong</a>
</div>

JavaScript

    .controller('AppCtrl', function($scope, $stateParams) {

        $('#weak').click(function() {
            $('#weak').addClass('active');
            $('#normal').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#normal').click(function() {
            $('#normal').addClass('active');
            $('#weak').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#strong').click(function() {
            $('#strong').addClass('active');
            $('#normal').removeClass('active');
            $('#weak').removeClass('active');
        });

   });
javascriptjqueryangularjsangularjs-ng-clickangularjs-ng-class
6
Lu Kanemon

selectedフラグを切り替えることができるng-clickを使用できます。これは、ng-classで使用して、クラスをバインド/バインド解除できます。

マークアップ

<div class="button-bar">
    <a class="button button-energized" id="weak" 
       ng-class="{active: $parent.selected=='weak'}" ng-click="$parent.selected='weak'">
      weak
    </a>
    <a class="button button-energized" id="normal" 
       ng-class="{active: selected=='normal'}" ng-click="selected='normal'">
        normal
    </a>
    <a class="button button-energized" id="strong" 
       ng-class="{active: selected=='strong'}" ng-click="selected='strong'">
        strong
    </a>
</div>

Working Fiddle

より良い方法

ng-repeatを使用すると、簡単にこれを行うことができます。これにより、コードの行を削減できます。

マークアップ

$scope.strengths = ["weak","normal","strong"];

コード

<div class="button-bar">
    <a class="button button-energized" id="{{strength}}" 
       ng-class="{active: $parent.selected == strength}" 
       ng-click="$parent.selected=strength"
       ng-repeat="strength in strengths">
      {{strength}}
    </a>
</div>
20
Pankaj Parkar

使用できます

angular.element（document.querySelector（ "＃cntrlID"））。removeClass（ "customclass"）;

HTML：

<div class="button-bar">
    <a class="button button-energized" id="weak" ng-click=removeNS()>weak</a>
    <a class="button button-energized" id="normal" ng-click=removeWS()>normal</a>
    <a class="button button-energized" id="strong" ng-click=removeWN()>strong</a>
</div>

角度

$scope.removeNS = function(){
    angular.element(document.querySelector("#normal")).removeClass("active");
    angular.element(document.querySelector("#strong")).removeClass("active");
}
$scope.removeWS = function(){
    angular.element(document.querySelector("#weak")).removeClass("active");
    angular.element(document.querySelector("#strong")).removeClass("active");
}
$scope.removeWN = function(){
    angular.element(document.querySelector("#weak")).removeClass("active");
    angular.element(document.querySelector("#normal")).removeClass("active");
}

さらに最適化するには、次のように、単一の関数を作成して、削除するクエリセレクターとクラスを関数パラメーターとして渡すだけです。

function(id1,id2,removeClassName)
1
Prashant Prabhakar Singh