uib-tabset 在禁用时显示内容

Question

我有一个标签集，如果第一个标签被禁用，内容仍会在页面加载时显示。单击另一个选项卡时，第一个选项卡将被禁用并且无法单击，这很好。（禁用属性由authorization/angular设置）

这是一个简化的例子：

<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>

如何隐藏禁用选项卡的内容并使 "first active tab" 在页面加载时处于活动状态？

一个选项是使用 ng-show/ng-if 但我仍然需要激活 "first active tab"

Answer 1

这样的事情怎么样？

<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 个选项卡被禁用，则默认激活另一个选项卡

Answer 2

在控制器中声明了一个变量。 (vm.activeTab) 该值将由函数设置，在前端将使用 angular.

检索该值

设置活动属性将在初始页面加载时显示正确的选项卡。

html:

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

控制器：

vm.activeTab = 1;

uib-tabset 在禁用时显示内容

uib-tabset shows content while its disabled

twitter-bootstrap

angular-ui-bootstrap