我的代码中有两个列表选项-每月和每季度我有一个类"active",它通常突出元素。
我需要类"活动"应该应用于其中一个选项,当他们被点击或选择。此处class=active仅手动应用于Monthly。正在为此寻找Angular解决方案。
<div class="list">
<p class="subheader secondary">Select Preferred View</p>
<ul class="tabs">
<li><a href="#monthly" ng-click="type='month'" data-ajax="false" **class=active**>Monthly</a></li>
<li><a href="#quarterly" ng-click="type='quarter'" data-ajax="false">Quarterly</a></li>
</ul>
</div>
像下面的代码一样使用ng类指令。
<div class="list">
<p class="subheader secondary">Select Preferred View</p>
<ul class="tabs">
<li><a href="#monthly" ng-click="type='month'" ng-class="{'active' : type=='month'}" data-ajax="false" **class=active**>Monthly</a></li>
<li><a href="#quarterly" ng-click="type='quarter'" ng-class="{'active' : type=='quarter'}" data-ajax="false">Quarterly</a></li>
</ul>
</div>
当类名后给定的表达式求值为true时,它会添加指定的类,当求值为false时,它将删除指定的类。
ng-class="{'classname' : expression}"
您可以在控制器中设置默认值:
$scope.type = 'month';
或通过div上的ng-init指令:
<div class="list" ng-init="type='month'">
jsfiddle与示例
jsfiddle在ng init 中设置默认值