1

我正在尝试在 angularjs 和 angularjs bootstrap 中创建一个多步骤表单。

我有以下 html 代码，每个步骤上的按钮都可以验证当前选项卡并移至下一个选项卡。我正在寻找的是每个选项卡的“禁用”状态，当表单在当前状态“isStepClean(0)”下未验证时，该状态将设置为 true。

我试过使用 class="disabled" 和 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}
    ];
4

4 回答 4

4

有人刚刚告诉我，这个修改已经在 Angular-UI 中进行了。它不在分解的 Angular-Bootstrap 上，但它是 Angular-UI 的引导组件的一部分。希望他们能尽快同步更改：

https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

编辑：以前的答案，因为我花了一段时间才弄清楚。

目前，它没有内置在 Angular-Bootstrap 中，但您可以像这样修改库：

在您的窗格中添加一个 disabled 属性（下面的示例是使用 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:'@'
},

通过将 disabled 添加到 panes 数组来测试它：

$scope.panes = [
        {active:true},
        {active:false, disabled:true},
        {active:false, disabled:true},
        {active:false}
    ];

现在使用您的验证功能（例如，isStepClean()）在窗格数组上设置禁用。

注意：这只会将disabled类应用于li元素（即，这将在外观上改变你的li元素以适应disabledTwitter Bootstrap 中的类）。您可以添加任何您想要的禁用行为作为自定义指令。

于 2013-06-09T00:42:40.427 回答
1

如果您使用 angular-ui tabset，则不推荐使用disabled。您应该改用禁用。

<tabset>
    <tab heading='Tab Title' disable="hasErrors">
        ...
于 2016-06-02T13:46:41.713 回答
1

添加了一个复选框以使用范围禁用选项卡。

如果复选框为真，则触发一个函数，将作用域的值分配给类属性 {{btnClass}}。通过 data-toggle 中的条件语句，我们可以设置这个属性。

data-toggle="{{btnClass == '禁用' ? '' : '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 = "";
}
};
于 2017-01-31T13:37:22.670 回答
0

使用两个具有相同标题的选项卡，一个使用ng-hide="yourDisableCondition"，另一个（不需要内容）使用ng-show="yourDisableCondition"AND disabled="true"。

于 2015-11-20T09:45:59.220 回答