Question

我有一个用这个plunker描述的表格： https://plnkr.co/edit/57SNhe9g4XA29Q5qDtux?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <form name="rootForm">
    <br>
    <div class="btn-toolbar">
      <a data-ng-click="" data-ng-disabled="rootForm.$invalid" class="btn btn-success">Save</a>
      <a class="btn btn-default" data-ng-click="">Cancel</a>
    </div>
    <br>
    <tabset>
      <tab heading="Tab 1"></tab>
      <tab heading="Tab 2">
        <tabset>
          <tab heading="Tab 2.1"></tab>
          <tab heading="Tab 2.2">
            <br>
            <div ng-repeat="child in childForms">
              <ng-form name="childForm_{{$index}}">
                <!-- form content-->
                <div>
                  {{ child.section }}
                  <span class="badge" ng-if="childForm_{{$index}}.$valid">Completed</span>
                </div>
                <div class="form-group col-sm-6" ng-class="{'has-error': childForm_{{$index}}.name.$invalid}">
                  Name:
                  <input type="text" ng-model="name" name="name" class="form-control" required/>
                  <small class="error" ng-show="childForm_{{$index}}.name.$error.required">
                      Your name is required.
                    </small>
                </div>

              </ng-form>
            </div>
          </tab>
          <tab heading="Tab 2.3"></tab>
        </tabset>
      </tab>
      <tab heading="Tab 3"></tab>
    </tabset>
  </form>


</body>

</html>

请注意，在Tab 2.2的所有部分都有效之前，“保存”按钮处于禁用状态。

有没有办法突出显示无效的标签层次结构，以便用户在最初打开表单并看到禁用按钮时不会感到困惑？

这样的事情：

使用更有趣的小缺点是我必须使用Angular v1.2.12和angular-bootstrap v0.10.0

突出显示AngularJS中无效的嵌套选项卡

0 个答案: