Search code examples
angularjsng-class

apply active class to static li tag in angluarjs


I have static ul li list as below.

<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>

I want to apply active class on clicking on particular li and it should also remove all active class applied to other li.

Thanks.


Solution

  • you have to set active tab identifier in scope and compare in ng-class to assign active class. check this jsbin link here