uib-tabset在禁用时显示内容。

Question

我有一个表集，如果第一个选项卡被禁用，内容仍然显示在页面加载上。单击另一个选项卡时，第一个选项卡将被禁用，无法单击该选项卡。(禁用属性由授权/角度设置)

下面是一个简化的示例：

<div class="col-md-12" data-ng-controller="myCtrl as vm">
    <div class="col-md-12">
        <h2>Title</h2>

        <div data-uib-tabset="">
            <div data-uib-tab="" index="0" data-heading="tab 1" disable="true')">
                <div class="col-md-12 vertical-gutter">
                    ...
                </div>
                <div class="clearfix"></div>
            </div>
            <div data-uib-tab="" index="1" data-heading="tab 2">
                <div class="col-md-12 vertical-gutter">
                    ...
                </div>
                <div class="clearfix"></div>
            </div>
            <div data-uib-tab="" index="2" data-heading="tab 3">
                <div class="col-md-12 vertical-gutter">
                    ...
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

如何隐藏禁用选项卡的内容并在页面加载时使“第一个活动选项卡”处于活动状态？

一个选项是使用ng-show/ng-if，但是我仍然需要使“第一个活动选项卡”激活。

Answer 1

声明控制器中的一个变量。(vm.activeTab)该值将由一个函数设置，在前面的值将以角的形式检索。

设置active属性将在init页面上显示正确的选项卡。

html：

<div data-uib-tabset="" active="vm.activeTab">

主计长：

vm.activeTab = 1;

Answer 2

像这样的怎么样？

<div data-uib-tab="" index="0" data-heading="tab 1" disable="expression">
    <div class="col-md-12 vertical-gutter">
         <div ng-hide="expression">
             content
         </div>
    </div>
    <div class="clearfix"></div>
</div>

或者，如果n个选项卡被禁用，则默认情况下仅使另一个选项卡处于活动状态。