Javascript 如何使用AngularJS添加和删除类？

我有几个按钮，像开关一样工作。如果单击其中一个按钮，它将变为活动状态并“关闭”其他按钮。我使用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>

---

您可以使用

ng click

来切换

selected

标志，该标志可与

ng类

一起用于绑定/解除绑定类

标记

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

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

{{强度}}

您可以使用

元素（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>

为了进一步优化，您只需创建一个函数，并将查询选择器和要删除的类作为函数参数传递，如：

function(id1,id2,removeClassName)

---

@Soosma感谢mate的提琴第一个例子很酷，我怎么才能让第一个选项默认为“主动”类？@souleater默认为“主动”类是什么意思？@PankajParkar我的意思是如果我想要第一个选项（在提琴例子中：“弱”）在打开页面时显示为红色：默认情况下已选择第一个选项。

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