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:
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');
});
});
You could have ng-click
that can toggle selected
flag, that could be use with ng-class
to bind / unbind 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-repeat
which will reduce your line of code.
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>