當使用ng-show時，ui-bootstrap選項卡顯示不正確的選項卡內容

我有選項卡，有些選項卡是用ng-show動態顯示的。問題是，如果第一個選項卡沒有顯示，那麼第二個選項卡應該是活動選項卡。但它不是這樣工作的。看來第一個選項卡仍處於活動狀態，導致標籤1的含量要在標籤2.當使用ng-show時，ui-bootstrap選項卡顯示不正確的選項卡內容

我需要的是下面的，當標籤被首次加載

在下面的代碼，如果我設置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 } 
    ]; 

    });

編輯

有在TA的content錯別字bs，但它並不真正影響問題和結果，因爲問題實際上只關注標籤2的內容，這是正確的。

來源

2016-05-15 Paul Samsotha

使用ng-if而不是ng-show。 ng-show只隱藏其他選項卡（選項卡2之前的選項卡），而實際上它們已經被渲染到dom中。

根據ui-tabs的實現，被渲染到dom中的第一個選項卡是活動選項卡。所以，第一個渲染的li [tab item]是活動的，並且一個css類active被應用於那個 - 它爲下面的活動狀態創建了漂亮的邊框。

當你使用ng-show，該項目得到了建立，得到了應用active CSS類，然後它成爲隱藏因爲ng-show（其中該元素，什麼也不做，而是由隱藏它應用了CSS類適用規則display: none !important）。

ng-if確保元素沒有被渲染到dom中，所以渲染的第一個元素是選項卡2，並且之前沒有其他元素，因此邏輯上 - active類被連接到它，並且您看到預期邊框和設計。

來源

2016-05-15 07:01:54

使用NG-如果不是NG-顯示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-15 06:32:51 aseferov

你是否有解釋在這種情況下的區別是什麼;爲什麼一個人工作，另一個不工作？ –

實際上它們都可以工作。正如@SSH在你的'$ scope.tabs'中說的所有內容'Tab 2 Content' – aseferov

複製和粘貼錯誤，但這不是問題，因爲第一個和第二個標籤的標籤內容是我們唯一關心的問題，那些是正確的 –

當使用ng-show時，ui-bootstrap選項卡顯示不正確的選項卡內容

回答

相關問題