Question

我有一个用 angular-ui-bootstrap 制作的默认（水平）标签集。

<uib-tabset active="0">
    <uib-tab index="0" heading="Foobar">
        <div ng-include="foobar.html"></div>
    </uib-tab>
    <!-- Other tabs... -->
</uib-tabset>

我想将其转换为移动设备的垂直“药片”标签。

<uib-tabset active="0" vertical="true" type="pills">
    <uib-tab index="0" heading="Foobar">
        <div ng-include="foobar.html"></div>
    </uib-tab>
    <!-- Other tabs... -->
</uib-tabset>

由于我正在使用Bootstrap 3，我尝试了以下解决方法：

<div class="visible-xs-block">
    <uib-tabset active="0" vertical="true" type="pills">
        <uib-tab index="0" heading="foobar">
            <div ng-include="foobar.htm"></div>
        </uib-tab>
        <!-- Other tabs... -->
    </uib-tabset>
</div>

<div class="hidden-xs">
    <uib-tabset active="0">
        <uib-tab index="0" heading="foobar">
            <div ng-include="foobar.html"></div>
        </uib-tab>
        <!-- Other tabs... -->
    </uib-tabset>
</div>

它“有效”，但我认为它不是很有效。我也有指令的问题，因为一些元素被定义了两次（ng-include是重复的）。

你现在如何在控制器或其他东西中正确处理它？</ p>

Answer 1

您可以执行以下操作，而不是复制代码：

<uib-tabset active="0" vertical="myIsSmallScreenVariable" ng-attr-type="myIsSmallScreenVariable ? 'pills' : null">
  <uib-tab index="0" heading="foobar">
    <div ng-include="foobar.htm"></div>
  </uib-tab>
  <!-- Other tabs... -->
</uib-tabset>

如何使用angular-ui-bootstrap基于屏幕分辨率在垂直药片和标签之间正确交换？

1 个答案: