如何在Angularjs中僅啓用活動選項卡並禁用所有其他選項卡？

我有四個選項卡作爲「Tab1，Tab2，Tab3，Tab4」。如何在Angularjs中僅啓用活動選項卡並禁用所有其他選項卡？

默認情況下，所有選項卡應該被禁用，並且應該啓用活動選項卡。

如果我單擊活動選項卡上的提交按鈕，然後我應該自動導航到下一個選項卡，方法是啓用下一個選項卡並將其設置爲活動並禁用上一個選項卡。

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

來源

2016-10-26 kalai

首先，你.panel體和.btn的使用有我假設你使用的引導，所以在這裏看看：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>

這將需要你考慮如何存儲你的標籤內容一點。最簡單的方法可能是使用模板。在這種情況下，你可以設計出您的標籤數組包含同時包含分頁標題以及內容模板的url，像這樣的對象的策略：

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

你的NG-包括然後看起來像這樣的：

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

將表單的提交動作轉到其他選項卡，然後變成將$ scope.selectedIndex變量更改爲要打開的選項卡的索引的簡單方法。

來源

2016-10-26 06:48:40

變化ng-if="displaytab1 && !displaytab2 && !displaytab3 && !displaytab4"到ng-if="$index==selected"

在您的按鈕提交功能，這樣ng-submit="save($index)"

添加指數在控制器的方法：

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

來源

2016-10-26 08:30:43

如何在Angularjs中僅啓用活動選項卡並禁用所有其他選項卡？

回答

相關問題