Question

我有如下静态列表。

<li ng-click="revenueTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.revenue}}</span>
  </a>
</li>
<li ng-click="ecpmTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.ecpm}}</span>
  </a>
</li>
<li ng-click="fillRateTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.fillrate}}</span>
  </a>
</li>
<li ng-click="impressionTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.impression}}</span>
  </a>
</li>
<li ng-click="cvvsTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.cvv}}
    </span>
  </a>
</li>

我想在点击特定的li时应用活动类，它还应该删除应用于其他li的所有活动类。

感谢。

Answer 1

您必须在范围中设置活动标签标识符，并在ng-class中进行比较以分配active类。检查此jsbin链接here

Answer 2

有很多方法可以做到这一点，这是AngularJS的众多方法之一

<li ng-class="active: aclass == 'rev' " ng-click="aclass = 'rev'; revenueTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.revenue}}</span>
  </a>
</li>
<li ng-class="active: aclass == 'ecpm' " ng-click="aclass = 'ecpm'; ecpmTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.ecpm}}</span>
  </a>
</li>
<li ng-class="active: aclass == 'fill' " ng-click="aclass = 'fill'; fillRateTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.fillrate}}</span>
  </a>
</li>
<li ng-class="active: aclass == 'imp' " ng-click="aclass = 'imp'; impressionTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.impression}}</span>
  </a>
</li>
<li ng-class="active: aclass == 'cvv' " ng-click="aclass = 'cvv'; cvvsTab()">
  <a class="btnIntoTab">
    <span class="tabValue">{{aggregation.cvv}}
    </span>
  </a>
</li>

将活动类应用于angluarjs中的静态li标记

2 个答案: