将 active class 应用于 angularjs 中的静态 li 标签

Question

我有如下静态 ul li 列表。

<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 时应用 active class，它还应该删除应用于其他 li 的所有 active class。

谢谢。

Answer 1

有很多方法可以做到这一点，这里是许多 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>

Answer 2

您必须在范围内设置活动选项卡标识符并在 ng-class 中进行比较以分配 active class。检查这个 jsbin link here

将 active class 应用于 angularjs 中的静态 li 标签

apply active class to static li tag in angluarjs

angularjs

ng-class