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>

第二种方法是从第一种方法开始的实际角度方法，以便轻松过渡。

希望会有所帮助。