好吧,我的代码中有两个列表选项——每月和每季度 我有一个“事件”类,它通常会突出显示该元素。
我需要在单击或选择选项时将“active”类应用于其中一个选项。这里 class=active 仅手动应用于每月。 为此寻找 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-class 指令。
<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>
当类名后的表达式计算结果为真时添加指定的类,当它计算为假时删除它。
ng-class="{'classname' : expression}"
您可以在 Controller 中设置默认值:
$scope.type = 'month';
或通过 div 上的 ng-init 指令:
<div class="list" ng-init="type='month'">
关于angularjs - 设置 css 类以动态列出选项 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33899995/