web-dev-qa-db-fra.com

Comment ajouter et supprimer une classe avec AngularJS?

J'ai quelques boutons qui fonctionnent comme des switchers. Si vous cliquez sur l'un, il devient actif et "ferme" les autres boutons. Je l'ai fait en utilisant jQuery mais j'aimerais utiliser AngularJS. Voici mon code:

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

Vous pourriez avoir ng-click qui peut basculer l'indicateur selected, qui pourrait être utilisé avec ng-class pour lier/unsind class.

Balisage

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

Travailler Fiddle

Meilleure façon

Vous pouvez facilement le faire en utilisant ng-repeat, ce qui réduira votre ligne de code.

Balisage

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

Code

<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>
19
Pankaj Parkar

Vous pouvez utiliser 

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>

Angular 

$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");
}

En outre, pour optimiser, vous pouvez simplement créer une fonction unique et transmettre les sélecteurs de requête et la classe à supprimer en tant que paramètre de fonction, comme suit:

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