Question

我有四个标签为＆＃34; Tab1，Tab2，Tab3，Tab4＆＃34;。

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

如果我点击活动标签中的提交按钮，我会自动导航到下一个标签，方法是启用下一个标签并将其设置为活动并禁用上一个标签。

<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/ 该页面上有一个标签组件，用于角度和引导程序。

其次，使用整数来控制当前选定的选项卡，而不是使用布尔值来控制应显示哪个选项卡。这也可以让你使用不同数量的标签。

<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>

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

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

您的ng-include将如下所示：

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

将表单的提交操作转到另一个选项卡，然后将$ scope.selectedIndex变量更改为要打开的选项卡的索引就变得很简单。

Answer 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;}`

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

2 个答案: