0

我有标签，其中一些是动态显示的ng-show。问题是如果第一个选项卡没有显示，那么第二个选项卡应该是活动选项卡。但它不是这样工作的。似乎第一个选项卡仍然处于活动状态，导致选项卡 1 的内容位于选项卡 2 中。

在此处输入图像描述

当第一次加载选项卡时，我需要的是以下内容

在此处输入图像描述

在下面的代码中，如果我active="1"为设置ui-tabset，那么它按预期工作

<uib-tabset active="1">

但我不能这样做，因为这需要是动态的。第一个选项卡可能显示也可能不显示。我尝试对active属性使用绑定值（如下面的代码所示），但这不起作用。它仍然与上面的第一张图像具有相同的结果。

我有以下 MCVE （也是Plunker）

html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body ng-app="exampleApp">
    <div ng-controller="TabsDemoCtrl">
      <uib-tabset active="initialActive">
        <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-show="tab.show" 
                 active="tab.active" index="$index">
          {{tab.content}}
        </uib-tab>
      </uib-tabset>
    </div>
  </body>
</html>

脚本

angular.module('exampleApp', ['ui.bootstrap'])
  .controller('TabsDemoCtrl', function($scope) {

    $scope.tab1Show = false;
    $scope.initialActive = $scope.tab1Show ? "0" : "1";

    $scope.tabs = [
      { title: 'Tab 1', content: 'Tab 1 Content', active: false, show: $scope.tab1Show },
      { title: 'Tab 2', content: 'Tab 2 Content', active: true, show: true },
      { title: 'Tab 3', content: 'Tab 2 Content', active: false, show: false },
      { title: 'Tab 4', content: 'Tab 2 Content', active: false, show: true },
      { title: 'Tab 5', content: 'Tab 2 Content', active: false, show: true }
    ];

  });

编辑

选项卡中有错别字content，但并不真正影响问题和结果，因为问题实际上只涉及选项卡 2 的内容，这是正确的。

4

2 回答 2

2

使用 ng-if 代替 ng-show Plunker

  <uib-tabset active="initialActive">
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" index="$index" ng-if='tab.show'>
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
于 2016-05-15T06:32:51.350 回答
1

使用ng-if而不是ng-show. ng-show仅隐藏其他选项卡（选项卡 2 之前的选项卡），而实际上它们已经渲染到 dom 中。

渲染到 dom 中的第一个选项卡是根据ui-tabs. 因此，第一个渲染的li[tab item] 是活动的，并且一个 css 类active被应用到它——这为活动状态创建了漂亮的边框，如下所示。

在此处输入图像描述

当您使用ng-show时，该项目被创建，被应用activecss 类，然后它被隐藏，因为 ng-show（它在该元素上应用了一个 css 类，除了通过应用规则隐藏它之外什么都不做display: none !important）。

ng-if确保元素没有被渲染到 dom 中，所以第一个被渲染的元素是 tab 2 并且在它之前没有其他元素，所以逻辑上，activeclass 被附加到它上面，你会看到预期的边框和设计。

于 2016-05-15T07:01:54.160 回答