3

私は Angular および AngularStrap ディレクティブを使用するのに少し慣れていません。例のように、静的マークアップでタブ ディレクティブを使用する必要があります。

<div data-fade="1" bs-tabs>
  <div data-title="'Home'"><p>Static tab content A</p></div>
  <div data-title="'Profile'"><p>Static tab content B</p></div>
</div>

ページの別の部分では、最初のタブが選択されている場合にのみ div を表示したいと考えています。div はタブの一部ではありませんが、同じコントローラー全体にあります。選択したタブに基づいてこの div を表示/非表示にするにはどうすればよいですか?

このようなもの？

<div ng-show="???? active tab stuff here ????">Home tab is selected</div>

助けてくれてありがとう。

4

2 に答える 2

4

AngularStrap ページの例に示すように、アクティブなタップは

tabs.activeTab

したがって、このプロパティを使用して、条件付きで他のものを表示することができます

<div ng-show="tabs.activeTab == 0">The first tab is active</div>

アップデート

非オブジェクト タブでも、bs-tabs に対してモデルをバインドして、次のようにアクティブな ID を保存できます。

<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>

これが更新されたplnkrです。(3 番目のタブをクリックして、[テスト] テキストが表示されるのを確認します)

于 2013-03-22T21:26:46.197 に答える
0

今のところ、この問題を解決するためのハックを見つけました。これは最善のアプローチとは思えないので、誰かがより良いアイデアを持っている場合は共有してください.

bsTabs ディレクティブが各タブのデータ切り替え属性を作成していることに気付きました。data-toggle shown イベントを見ることで、タブの変更を認識して div を表示することができます。コントローラーのコードは次のようになります。

    $scope.HomeTabSelected = true;

    function watchTab() {
        $('a[data-toggle="tab"]').on('shown', function (e) {
            $scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
        })
    }

    setTimeout(watchTab, 2000);  // setTimeout necessary to allow directive to render

HTML div は ng-show を使用します。

    <div ng-show="HomeTabSelected">Home tab is selected</div>
于 2013-03-23T00:42:59.810 に答える