ui-bootstrap 选项卡在使用 ng-show 时显示不正确的选项卡内容

Question

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

第一次加载标签时，我需要的是以下内容

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

<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 的内容，这是正确的。

Answer 1

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

Answer 2

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

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

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

ng-if 确保该元素不会被渲染到 dom，因此第一个被渲染的元素是选项卡 2，并且在它之前没有其他元素，所以逻辑上 - active class 附加到它，您会看到预期的边框和设计。

ui-bootstrap 选项卡在使用 ng-show 时显示不正确的选项卡内容

ui-bootstrap tab shows incorrect tab content when using ng-show

angularjs

angular-ui-bootstrap

angular-ui-bootstrap-tab