如何在Angularjs中默认启用仅活动选项卡并禁用所有其他选项卡？答案

【问题标题】：How to enable only active tab and disable all other tabs by default in Angularjs?如何在Angularjs中默认启用仅活动选项卡并禁用所有其他选项卡？
【发布时间】：2017-03-08 09:34:43
【问题描述】：

我有四个标签，分别是“Tab1、Tab2、Tab3、Tab4”。

默认情况下，所有选项卡都应禁用，而活动选项卡应启用。

如果我单击活动选项卡中的提交按钮，那么我应该通过启用下一个选项卡并将其设置为活动并禁用上一个选项卡来自动导航到下一个选项卡。

<li class="myli" ng-repeat="tab in tabs track by $index" ng-class="{active:isSelected($index)}"><a href ng-click="displaySelectedtab(tab, $index)">{{tab}}</a></li>

<div class="panel-body newPanelBody" ng-if="displaytab1 &&  !displaytab2 && !displaytab3 && !displaytab4">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab1</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

<div class="panel-body newPanelBody" ng-if="displaytab2 &&  !displaytab1 && !displaytab3 && !displaytab4">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab2</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

<div class="panel-body newPanelBody" ng-if="displaytab3 &&  !displaytab1 && !displaytab2 && !displaytab4">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab3</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

<div class="panel-body newPanelBody" ng-if="displaytab4 &&  !displaytab1 && !displaytab2 && !displaytab3">
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate>
        <h4>Tab4</h4>
        <br> 
        <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button>
    </form>
</div>

【问题讨论】：

标签： javascript angularjs tabs

【解决方案1】：

首先，你使用 .panel-body 和 .btn 让我假设你使用引导程序，所以请看这里：https://angular-ui.github.io/bootstrap/ 该页面上有一个选项卡组件，用于 angular 和 bootstrap。

其次，与其使用布尔值来控制应显示哪个选项卡，不如使用整数来控制当前选定的选项卡要容易得多。这也将允许您使用可变数量的选项卡。

<li class="myli" ng-repeat="tab in tabs track by $index" ng-class="{active: selectedIndex == $index}"><a href ng-click="displaySelectedtab(tab, $index)">{{tab}}</a></li>

<div class="panel-body newPanelBody" ng-repeat="tab in tabs track by $index" ng-if="selectedIndex == $index">
    <h4>Tab {{$index + 1}}</h4>

    <!-- If you need different content for each tab you can include an angular template as well -->
    <ng-include src="'path/to/template.tpl.html'"></ng-include>
</div>

这需要您考虑一下如何存储您的标签内容。最简单的方法可能是使用模板。在这种情况下，您可以设计一个策略，其中您的选项卡数组包含包含选项卡标题和内容模板 url 的对象，如下所示：

$scope.tabs = [
    {
        "title": "Tab 1",
        "templateUrl": "path/to/template.tpl.html"
    }
];

您的 ng-include 将如下所示：

<ng-include src="tab.templateUrl"></ng-include>

让表单的提交操作转到不同的选项卡，然后只需将 $scope.selectedIndex 变量更改为您要打开的选项卡的索引即可。

【讨论】：

【解决方案2】：

将ng-if="displaytab1 && !displaytab2 && !displaytab3 && !displaytab4" 更改为ng-if="$index==selected"

在您的按钮提交功能中添加这样的索引ng-submit="save($index)"

在控制器方法中：

`$scope.selected=1;  $scope.save= function(index){selected=index+1;}`

【讨论】：