我有工作就像切换几个按钮。如果您单击之一,它变得活跃和关闭按钮等。我这样做是使用jQuery而是想使用AngularJS。这里是我的code:
HTML
< DIV CLASS =按钮栏> <一类=按钮按钮通电ID =弱>弱LT; / A> &下;一类=按钮按键断电ID =正常>正常&下; / A> <一类=按钮按钮通电ID =强>强< / A>< / DIV>
的JavaScript
.controller('AppCtrl',函数($范围,$ stateParams){ $('#弱')。点击(函数(){ $('#弱')addClass(激活)。 $('#正常)removeClass移除(激活)。 $('#强)removeClass移除(激活)。 }); $('#正常')。点击(函数(){ $('#正常')addClass(激活)。 $('#弱)removeClass移除(激活)。 $('#强)removeClass移除(激活)。 }); $('#强)。点击(函数(){ $('#强')addClass(激活)。 $('#正常)removeClass移除(激活)。 $('#弱)removeClass移除(激活)。 }); });
解决方案
您可以有 NG-点击
,可以切换选
标记,这可能是与纳克级
使用绑定/解除绑定类。
标记
< DIV CLASS =按钮栏> <一类=按钮按钮通电ID =弱 NG-CLASS ={活跃:$ parent.selected =='弱'}NG点击=$ parent.selected =弱> 弱 &所述; / A> <一类=按钮按钮通电ID =正常 NG-CLASS ={活跃:选择=='正常'}NG点击=选择='正常'> 正常 &所述; / A> <一类=按钮按钮通电ID =强 NG-CLASS ={活跃:选择=='强'}NG点击=选择='强'> 强大 &所述; / A>< / DIV>
工作小提琴
更好的办法
您可以很容易地通过使用做到这一点 NG-重复
这将减少你的code系列。
标记
$ scope.strengths =弱,正常,强];
code
< DIV CLASS =按钮栏> <一类=按钮按钮通电ID =弱 NG-CLASS ={活跃:$ parent.selected ==实力} NG-点击=$ parent.selected =实力 NG-重复=实力优势> {{强度}} &所述; / A>< / DIV>
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>
Working Fiddle
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="weak"
ng-class="{active: $parent.selected == strength}"
ng-click="$parent.selected=strength"
ng-repeat="strength in strengths">
{{strength}}
</a>
</div>