Wie Klasse hinzufügen und mit AngularJS entfernen?

Question

Ich habe ein paar Tasten, die wie Schalter funktionieren. Wenn Sie auf eins klicken, wird es aktiv und "schaltet" andere Tasten aus. Ich habe dies mit jQuery gemacht, möchte aber AngularJS verwenden. Hier ist mein 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'); 
     }); 

    }); 

Answer 1

Sie ng-click haben könnte, die selected Flag umschalten kann, das könnte nützlich sein mit ng-class/unbind Klasse zu binden .

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

bessere Weg

Sie einfach diese ng-repeat, indem Sie tun könnte, die Ihre Codezeile reduzieren.

Markup

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

Answer 2

Sie

angular.element verwenden (document.querySelector ("# cntrlID")). RemoveClass ("benutzerdefinierte Klasse");

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

weiter zu optimieren, können Sie nur eine einzige Funktion erstellen und die Abfrage Selektoren passieren und Klasse als die Funktion zu entfernen Parameter wie:

function(id1,id2,removeClassName)