javascript - 如何在 Angularjs 中默认仅启用事件选项卡并禁用所有其他选项卡？

Question

我有四个选项卡:“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>

Answer 1

首先，您对 .panel-body 和 .btn 的使用让我假设您使用 bootstrap，所以请看这里:https://angular-ui.github.io/bootstrap/ 该页面上有一个选项卡组件，用于与 Angular 和 Bootstrap 一起使用。

其次，使用整数来控制当前选定的选项卡要容易得多，而不是使用 bool 值来控制应显示哪个选项卡。这还允许您使用不同数量的选项卡。

<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 变量更改为您要打开的选项卡的索引即可。