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>

标签变为有效的当前规则基于length的{{1}}。除此之外，虽然我希望按钮可以点击和点击，但点击的标签上有活动类。在所有三个按钮之间一次只能有一个活动类。

非常标准，简单的东西，但实现这一目标的最佳实践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>

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

希望有所帮助。

ng-click上的角度活动类

1 个答案: