ni-bootstrapタブは、ng-showを使用すると不正なタブの内容を表示します

タブがあります。一部は動的にng-showと表示されます。問題は、最初のタブが表示されていない場合は、2番目のタブがアクティブなタブであることです。しかし、この方法では動作しません。タブが最初ni-bootstrapタブは、ng-showを使用すると不正なタブの内容を表示します

にロードされると、以下の通りである私は必要なのタブ2.

にあるように、タブ1つのコンテンツを引き起こし、最初のタブがまだアクティブであると思われます以下のコードで

は、私はそれが期待どおりに動作、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 } 
    ]; 

    });

EDIT

TAのcontentでタイプミスがありますがありますbsですが、問題は本当にタブ2の内容にしか関係していないので、質問と結果に実際には影響しません。

出典

2016-05-15 Paul Samsotha

利用ng-if代わりのng-show NG-場合。 ng-showは、他のタブ（タブ2の前のタブ）を隠すだけですが、実際にはすでにDOMにレンダリングされています。

domにレンダリングされる最初のタブは、ui-tabsの実装に従ってアクティブなものです。したがって、最初にレンダリングされたli [タブ項目]はアクティブなもので、CSSのクラスactiveがそれに適用されます。これは以下のようにアクティブな状態の素敵な境界線を作成します。

あなたがng-showを使用すると、その項目が作成されてしまった、何もしませんが、ことによってそれを隠し、その要素のCSSクラスを適用した（active CSSクラスを適用し、それが理由ng-showの隠れになってしまいましたルールdisplay: none !importantを適用します）。

ng-ifは必ず要素がレンダリングされる最初の要素はタブ2であり、前には他の要素がありませんので、DOMにレンダリング取得されていないので、logically- activeクラスは、それに接続されますと、あなたが期待される境界線を見ますデザイン。

出典

2016-05-15 07:01:54

使用の代わりに、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

この場合の違いは何ですか？なぜ、1つは動作し、もう1つは動作しませんか？ –

実際には両方とも動作可能です。あなたの '$ scope.tabs'で@SSHが言ったように' Tab 2 Content' – aseferov

コピー＆ペーストのエラーですが、第1タブと第2タブのタブ内容が唯一の問題なので問題はありません。そしてそれらは正しいです –

ni-bootstrapタブは、ng-showを使用すると不正なタブの内容を表示します

答えて

関連する問題