问题描述
我有一些像切换器一样工作的按钮。 如果单击一个，它将变为活动状态并“关闭”其他按钮。 我使用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');
});
});
1楼
Pankaj Parkar
20
已采纳
2015-08-07 08:02:13
您可以使用ng-click来切换selected标志，该标志可以与ng-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>
更好的方法
您可以使用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>
2楼
Prashant Prabhakar Singh
0
2017-06-27 07:30:11
您可以使用
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>
角
$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)