Javascript 如何使用 AngularJS 添加和删除类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31872518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add and remove class with AngularJS?
提问by Lu Kanemon
I have a few buttons that work like switchers. If you click one it becomes active and "shuts down" other buttons. I did this using jQuery but would like to use AngularJS. Here is my code:
我有几个按钮可以像切换台一样工作。如果您单击一个按钮，它会变为活动状态并“关闭”其他按钮。我使用 jQuery 做到了这一点，但想使用 AngularJS。这是我的代码：
HTML
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
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');
});
});
回答by Pankaj Parkar
You could have ng-clickthat can toggle selectedflag, that could be use with ng-classto bind / unbind class.
您可以拥有ng-click可以切换selected标志，可以ng-class用于绑定/取消绑定类。
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>
Better way
更好的方法
You could easily do this by using ng-repeatwhich will reduce your line of code.
您可以通过使用ng-repeatwhich来轻松地做到这一点，这将减少您的代码行。
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>
回答by Prashant Prabhakar Singh
You can use
您可以使用
angular.element(document.querySelector("#cntrlID")).removeClass("customclass");
angular.element(document.querySelector("#cntrlID")).removeClass("customclass");
HTML:
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");
}
Further to optimize, you can just create a single function and pass the query selectors and class to remove as the function parameter, like:
进一步优化，您可以只创建一个函数并传递查询选择器和类作为函数参数删除，例如：
function(id1,id2,removeClassName)
