Come aggiungere e rimuovere classi con AngularJS?

Question

Ho alcuni pulsanti che funzionano come switcher. Se fai clic su uno si attiva e "arresta" altri pulsanti. L'ho fatto usando jQuery ma vorrei usare AngularJS. Qui è il mio codice:

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'); 
     }); 

    }); 

Answer 1

Si potrebbe avere ng-click che può alternare selected bandiera, che potrebbe essere l'uso con ng-class di legare/classe unbind .

Markup

<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

Modo migliore

Si potrebbe facilmente farlo utilizzando ng-repeat che ridurrà la vostra linea di codice.

Markup

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

Codice

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

Answer 2

È possibile utilizzare

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> 

angolare

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

Inoltre per ottimizzare, si può semplicemente creare una singola funzione e passare i selettori query e di classe per rimuovere la funzione parametro, ad esempio:

function(id1,id2,removeClassName)