如何使用 AngularJS 添加和删除 class？

Question

我有几个按钮可以像切换器一样工作。如果您单击其中一个按钮，它会变为活动状态，而 "shuts down" 其他按钮将变为活动状态。我使用 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>

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

你可以有 ng-click 可以切换 selected 标志，可以与 ng-class 一起使用来绑定/解除绑定 class.

标记

<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

更好的方法

您可以使用 ng-repeat 轻松做到这一点，这将减少您的代码行数。

标记

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

Answer 2

您可以使用

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

进一步优化，您可以只创建一个函数并传递查询选择器和 class 以作为函数参数删除，例如：

function(id1,id2,removeClassName)

如何使用 AngularJS 添加和删除 class？

How to add and remove class with AngularJS?

javascript

jquery

angularjs

angularjs-ng-click

angularjs-ng-class