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>

如何隐藏已禁用标签的内容并在页面加载时激活“第一个活动标签”？

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

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检索该值。

设置活动属性将在init pageload中显示正确的选项卡。

HTML：

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

控制器：

vm.activeTab = 1;

uib-tabset在禁用

2 个答案: