我正在尝试在angularjs和angularjs bootstrap中创建一个多步骤表单。
我有以下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}
];
答案 0 :(得分:4)
有人告诉我,这个修改已经在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-tpls.js
,请对ui-bootstrap.js
文件进行以下修改。我假设您将知道如何修改外部模板的这些说明):
搜索$templateCache.put("template/tabs/tabs.html"...
并将disabled:pane.disabled
属性添加到ng-class
(正确转义):
<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()
)在panes数组上设置禁用。
注意:这只会将disabled
类应用于li
元素(也就是说,这会在美化方面将您的li
元素更改为安慰Twitter Bootstrap中的disabled
类)。您可以添加任何您想要的禁用行为作为自定义指令。
答案 1 :(得分:1)
如果您使用angular-ui tabset,则不推荐使用已禁用。您应该使用禁用。
<tabset>
<tab heading='Tab Title' disable="hasErrors">
...
答案 2 :(得分:1)
添加了一个复选框以使用范围禁用选项卡。
如果checkbox为true,则触发一个函数,该函数将范围的值分配给类属性{{btnClass}}。通过数据切换中的条件语句,我们可以设置此属性。
数据切换=&#34; {{btnClass ==&#39;已禁用&#39; ? &#39;&#39; :&#39; tab&#39;}}&#34;
HTML
environments = [
{ browserName: "chrome", platform: "WINDOWS", platformVersion: "10", os: "WINDOWS", os_version: "10", resolution: "2048x1536" },
{ browserName: "firefox", version: "46", platform: "WINDOWS", platformVersion: "10", os: "WINDOWS", os_version: "10", resolution: "2048x1536" },
{ browserName: "internet explorer", version: "11", platform: "WINDOWS", platformVersion: "10", os: "WINDOWS", os_version: "10", requireWindowFocus: true, fixSessionCapabilities: false, resolution: "2048x1536" }
]
Angularjs
<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>
答案 3 :(得分:0)
使用两个标题相同的标签,一个标题为ng-hide="yourDisableCondition"
,另一个标题为ng-show="yourDisableCondition"
和disabled="true"
。