Jak dodać i usunąć zajęcia z AngularJS?

Question

Mam kilka przycisków, które działają jak przełączniki. Jeśli klikniesz jeden, stanie się aktywny i "zamknie" inne przyciski. Zrobiłem to za pomocą jQuery, ale chciałbym użyć AngularJS. Tu jest mój kodu:

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

Można mieć ng-click które mogą przełączać selected flag, które mogą być użyte z ng-class związać/klasa 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

Lepszy sposób

Można łatwo zrobić za pomocą ng-repeat co zmniejszy swoją linię kodu.

Markup

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

Kod

<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

Można użyć

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> 

kątowa

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

Ponadto w celu optymalizacji, można po prostu stworzyć pojedynczą funkcję i przekazać selektorów zapytań i klasy, aby usunąć jak funkcja parametr, taki jak:

function(id1,id2,removeClassName)