ng-click上的角活動類

Question

在我的角度應用程序中，我有三個按鈕，每個按鈕代表不同的狀態。

<ul class="handset-qty-tabs">
    <li ng-class="{'active': devices.length < 5 && tariffTypeSelection !== 'welcome'}">1 - 4 {{ params.device_name }}s</li>
    <li ng-class="{'active': devices.length >= 5}">5 - 19 {{ params.device_name }}s</li>
    <li>20 + {{ params.device_name }}s</li>
</ul>

選項卡變為活動狀態的當前規則基於devices的length 。 除此之外，盡管我希望按鈕可單擊和onclick，但clicked選項卡具有活動類。 三個按鈕之間一次只能有一個活動班級。

相當標准，簡單的東西，但是實現這一目標的最佳實踐Angular方法是什么？

Answer 1

以角度的方式，您需要保持哪個選項卡當前處於活動狀態，並找到一種使用功能進行切換的方法，因此活動選項卡和功能定義的默認值應為

scope.activeTab = scope.devices.length < 5 && scope.tariffTypeSelection !== 'welcome' ? "first" : "second"; // only have first and second just implement the others.

//will bind this to the ng-click
scope.tabClick = function(tab) {
   scope.activeTab = tab;
};

現在，控制器邏輯已准備好用於視圖；

<ul class="handset-qty-tabs">
    <li ng-class="{'active': activeTab === 'first' }" ng-click="tabClick('first');">1 - 4 {{ params.device_name }}s</li>
    <li ng-class="{'active': activeTab === 'second'" ng-click="tabClick('second');">5 - 19 {{ params.device_name }}s</li>
    <li>20 + {{ params.device_name }}s</li>
</ul>

如果您可以（或如果已經擁有）構建如下所示的選項卡數組，那么這實際上是一個非常簡單的示例；

scope.tabs = [{text: "1 - 4", isActive: true}, {text: "5 - 19", isActive: false}];
//don t forget to set isActive accroding to your rule also build texts properly
scope.tabClick = function(index) {
   angular.forEach(scope.tabs, function(t){t.isActive = false;});
   scope.tabs[index].isActive = true;
};

與上面的示例類似，設置顯示並用ng-repeat單擊；

<ul class="handset-qty-tabs">
        <li ng-repeat="tab in tabs" ng-class="{'active': tab.isActive }" ng-click="tabClick($index);">{{tab.text}} {{ params.device_name }}s</li>
</ul>

第二種方法是從第一種方法開始的實際角度方法，以便輕松過渡。

希望會有所幫助。