[英]How to disable angular-ui bootstrap tabs?
我正在嘗試在angularjs和angularjs引導程序中創建多步驟表單。
我有以下html代碼,每個步驟上的按鈕均會驗證當前標簽頁並轉到下一步。 我正在尋找的是每個選項卡的“已禁用”狀態,當表單未在當前狀態“ isStepClean(0)”中進行驗證時,該選項卡將設置為true。
我已經嘗試過使用class =“ disabled”並將其禁用為屬性,但是沒有用。 有什么想法怎么做?
<tabs>
<pane heading="1. Recipients" active="panes[0].active" disabled="panes[0].disabled">
....
<input type="button" ng-disabled="isStepClean(0)" class="btn btn-info pull-right" ng-click="panes[1].active = true" name="" value="Next step" />
</pane>
<pane heading="2. Information" active="panes[1].active" disabled="panes[1].disabled">
....
<input type="button" ng-disabled="isStepClean(1)" class="btn btn-info pull-right" ng-click="panes[2].active = true" name="" value="Next step" />
</pane>
<pane heading="3. Preview" active="panes[2].active" disabled="panes[2].disabled">
....
<input type="button" ng-disabled="isStepClean(2)" class="btn btn-info pull-right" ng-click="panes[3].active = true" name="" value="Next step" />
</pane>
</tabs>
在控制器中,我有:
$scope.panes = [
{active:true},
{active:false},
{active:false},
{active:false}
];
有人告訴我,此修改已在Angular-UI中進行。 它不在出現的Angular-Bootstrap上,但它是Angular-UI的bootstrap組件的一部分。 希望他們會盡快同步更改:
https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2
編輯:以前的答案,因為我花了一段時間才弄清楚。
目前,它尚未內置在Angular-Bootstrap中,但是您可以像這樣修改庫:
將禁用的屬性添加到您的窗格中(下面的示例是ng-repeat,但是您可以像在示例中一樣手動添加它):
<tabs>
<pane ng-repeat="pane in panes" heading="{{pane.title}}" disabled="{{pane.disabled}}" active="pane.active">{{pane.content}}</pane>
</tabs>
如果使用ui-bootstrap.js
,則對ui-bootstrap-tpls.js
文件進行以下修改(我假設您知道如何修改外部模板的這些說明):
搜索$templateCache.put("template/tabs/tabs.html"...
然后將disabled:pane.disabled
屬性添加到ng-class
(使用適當的轉義disabled:pane.disabled
):
<div class="tabbable">
<ul class="nav nav-tabs">
<li ng-repeat="pane in panes" ng-class="{active:pane.selected, disabled:pane.disabled}">
<a ng-click="select(pane)" href="">{{pane.heading}}</a>
</li>
</ul>
<div class="tab-content" ng-transclude></div>
</div>
搜索.directive('pane', ['$parse', function($parse) {
並更改:
scope:{
heading:'@'
},
至:
scope:{
heading:'@',
disabled:'@'
},
通過將禁用添加到窗格數組中進行測試:
$scope.panes = [
{active:true},
{active:false, disabled:true},
{active:false, disabled:true},
{active:false}
];
現在,使用您的驗證功能(例如isStepClean()
)來在窗格數組上設置禁用狀態。
注意:這只會將disabled
類應用於li
元素(即,這將從外觀上更改您的li
元素,以適應Twitter Bootstrap中的disabled
類)。 您可以將所需的任何禁用行為添加為自定義指令。
如果您使用的是angular-ui標簽集,則不建議使用Disabled 。 您應該改用禁用 。
<tabset>
<tab heading='Tab Title' disable="hasErrors">
...
添加了一個復選框以禁用使用范圍的選項卡。
如果復選框為true,則將觸發一個函數,該函數將范圍的值分配給類屬性{{btnClass}}。 通過數據切換中的條件語句,我們可以設置此屬性。
data-toggle =“ {{btnClass =='disabled'?'':'tab'}}”“
的HTML
<input type="checkbox" ng-model="vm.target[isselected]" name="" ng-click="checkbox(isselected)"> TARGET ALL USERS
<ul class="nav nav-tabs tabs-left" role="tablist">
<span class="navTitle">TARGET GROUP</span><!-- 'tabs-right' for right tabs -->
<li class="active" role="presentation"><a href='' data-target="#everyone" aria-controls="everyone" data-toggle="tab">EVERYONE</a></li>
<li class="{{btnClass}}"><a href='' data-target="#userprofile" aria-controls="userprofile" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">USER PROFILE</a></li>
<li class="{{btnClass}}"><a href='' data-target="#customergroup" aria-controls="customergroup" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CUSTOMER GROUP</a></li>
<li class="{{btnClass}}"><a href='' data-target="#customer" aria-controls="customer" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CUSTOMER</a></li>
<li class="{{btnClass}}"><a href='' data-target="#catalog" aria-controls="catalog" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CATALOG</a></li>
<li class="{{btnClass}}"><a href='' data-target="#customerwarehouse" aria-controls="customerwarehouse" data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}">CUSTOMER WAREHOUSE</a></li>
</ul>
AngularJS
$scope.checkbox = function(isselected) {
if (vm.target[isselected]) {
$scope.btnClass = "disabled";
}
else {
$scope.btnClass = "";
}
};
使用兩個標題相同的選項卡,一個選項卡使用ng-hide="yourDisableCondition"
,另一個選項卡(不需要內容)使用ng-show="yourDisableCondition"
AND disabled="true"
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.