设置css类以动态列出选项AngularJS

Question

我的代码中有两个列表选项 - 每月和每季度 我有一个“活动”类，通常会突出显示该元素。

当单击或选择选项之一时，我需要将“活动”类应用于其中一个选项。此处 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>

Answer 1

在下面的代码中使用 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}"

您可以在控制器中设置默认值：

$scope.type = 'month';

或通过 div 上的 ng-init 指令：

<div class="list" ng-init="type='month'">

jsfiddle with example

jsfiddle with setting default in ng-init