如何在Angularjs中默认只启用活动选项卡而禁用所有其他选项卡

How to enable only active tab and disable all other tabs by default in Angularjs?

本文关键字：选项 其他 活动 Angularjs 默认 启用      更新时间：2023-09-26

我有四个标签:"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>

首先，您使用。panel-body和。btn让我假设您使用了bootstrap，所以请查看这里:https://angular-ui.github.io/bootstrap/在那个页面上有一个tab组件，用于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>

使表单的提交动作转到另一个选项卡，然后就变成了改变$作用域的简单问题。

将selectedIndex变量设置为要打开的选项卡的索引。

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

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

In controller method:

`$scope.selected=1;  $scope.save= function(index){selected=index+1;}`
相关文章：