將活動類應用於靜態li標籤中angluarjs

Question

我有如下所示的靜態ul列表。

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

我想申請活動類上點擊特定李，它也應該刪除所有活動類應用於其他李。

謝謝。

Answer 1

你必須設置活動標籤標識的範圍和納克級的比較分配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>