[英]How to disable angular-ui bootstrap tabs?
I'm trying to create a multi step form in angularjs and angularjs bootstrap. 我正在尝试在angularjs和angularjs引导程序中创建多步骤表单。
I have the following html code, buttons on each step that validate current tab and move to the next. 我有以下html代码,每个步骤上的按钮均会验证当前标签页并转到下一步。 What I'm looking for is a "disabled" state for each tab that will be set to true while the form is not validated in current state "isStepClean(0)".
我正在寻找的是每个选项卡的“已禁用”状态,当表单未在当前状态“ isStepClean(0)”中进行验证时,该选项卡将设置为true。
I've tried with class="disabled" and disabled as attribute but didn't work. 我已经尝试过使用class =“ disabled”并将其禁用为属性,但是没有用。 Any ideas how to do it?
有什么想法怎么做?
<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>
In the controller I have: 在控制器中,我有:
$scope.panes = [
{active:true},
{active:false},
{active:false},
{active:false}
];
Someone just informed me that this modification was made already in Angular-UI. 有人告诉我,此修改已在Angular-UI中进行。 It's not on the broken out Angular-Bootstrap, but it is part of the bootstrap component of Angular-UI.
它不在出现的Angular-Bootstrap上,但它是Angular-UI的bootstrap组件的一部分。 Hopefully they'll sync up the changes soon:
希望他们会尽快同步更改:
https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2 https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2
EDIT: previous answer because it took me a while to figure out. 编辑:以前的答案,因为我花了一段时间才弄清楚。
Currently, its not built into Angular-Bootstrap, but you can modify the library like so: 目前,它尚未内置在Angular-Bootstrap中,但是您可以像这样修改库:
Add a disabled attribute to your pane (below example is with ng-repeat, but you can add it manually as you have in your example): 将禁用的属性添加到您的窗格中(下面的示例是ng-repeat,但是您可以像在示例中一样手动添加它):
<tabs>
<pane ng-repeat="pane in panes" heading="{{pane.title}}" disabled="{{pane.disabled}}" active="pane.active">{{pane.content}}</pane>
</tabs>
Then make the following modifications to your ui-bootstrap-tpls.js
file if using ui-bootstrap.js
I assume you'll know how to modify these instructions for external templates): 如果使用
ui-bootstrap.js
,则对ui-bootstrap-tpls.js
文件进行以下修改(我假设您知道如何修改外部模板的这些说明):
Search $templateCache.put("template/tabs/tabs.html"...
and add the disabled:pane.disabled
property to ng-class
(with proper escaping): 搜索
$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>
Search for .directive('pane', ['$parse', function($parse) {
and change: 搜索
.directive('pane', ['$parse', function($parse) {
并更改:
scope:{
heading:'@'
},
to: 至:
scope:{
heading:'@',
disabled:'@'
},
Test it out by adding disabled to the panes array: 通过将禁用添加到窗格数组中进行测试:
$scope.panes = [
{active:true},
{active:false, disabled:true},
{active:false, disabled:true},
{active:false}
];
Now use your validation function (eg, isStepClean()
) to set disabled on the panes array. 现在,使用您的验证功能(例如
isStepClean()
)来在窗格数组上设置禁用状态。
Note: this will only apply disabled
class to the li
elements (ie, this will cosmetically change your li
elements to comfort to the disabled
class in Twitter Bootstrap). 注意:这只会将
disabled
类应用于li
元素(即,这将从外观上更改您的li
元素,以适应Twitter Bootstrap中的disabled
类)。 You can add whatever disabling behavior you want as a custom directive. 您可以将所需的任何禁用行为添加为自定义指令。
In case you're using angular-ui tabset, the use of disabled is deprecated. 如果您使用的是angular-ui标签集,则不建议使用Disabled 。 You should use disable instead.
您应该改用禁用 。
<tabset>
<tab heading='Tab Title' disable="hasErrors">
...
A checkbox added to disable the tab using scope. 添加了一个复选框以禁用使用范围的选项卡。
If checkbox is true then a function is been triggered, which assigns the value of scope to class attribute {{btnClass}}. 如果复选框为true,则将触发一个函数,该函数将范围的值分配给类属性{{btnClass}}。 By conditional statement in data-toggle we can set this attribute.
通过数据切换中的条件语句,我们可以设置此属性。
data-toggle="{{btnClass == 'disabled' ? '' : 'tab'}}" data-toggle =“ {{btnClass =='disabled'?'':'tab'}}”“
HTML 的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 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.