将css类设置为动态列出选项AngularJS

时间:2015-11-24 17:22:27

标签: css angularjs css3 angularjs-directive

我的代码中有两个列表选项 - 每月和每季度 我有一个班级"活跃"这通常突出了元素。

我需要上课"活跃"单击或选择时应应用于其中一个选项。这里class = active仅手动应用于Monthly。 为此寻找Angular解决方案。

driver.findElement(By.xpath("html/body/form/div/center/table/tbody/tr[4]/td/form/input")).click();
driver.findElement(By.name("submit")).click();
driver.findElement(By.tagName("input")).click();

1 个答案:

答案 0 :(得分: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>

当classname计算结果为true时,它会添加指定的类,并在计算结果为false时将其删除。

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