如何獲取AngularStrap活動標籤？

我對使用Angular和AngularStrap指令有點新。我需要使用的標籤指令與靜態標記像例如：如何獲取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>

感謝您的任何幫助。

來源

2013-03-22 Carbonski

如圖所示example的AngularStrap頁面激活水龍頭存儲在

tabs.activeTab

，這樣您就可以使用這個屬性來有條件地顯示顯示別的東西，像這樣

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

UPDATE

即使使用非對象選項卡，也可以將模型綁定到bs選項卡上以存儲活動ID像這樣：

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

這裏是更新的plnkr。 （點擊第3個標籤，看到'Test'文字出現）

來源

2013-03-22 21:26:46

據我明白，爲驅動對象的選項卡這隻能在標籤陣列模型中定義。我正在使用標記驅動的示例。我必須使用它，因爲有些選項卡只有在用戶通過身份驗證時纔會顯示，這是ASP.Net Razor視圖代碼的一部分。我想知道是否甚至有可能使用標記驅動標籤獲取指令外的activeTab。 – Carbonski 2013-03-22 22:54:33

太棒了，感謝您的更新。我知道必須有一個更簡單的方法。應該提到你在控制器中需要這個代碼：'$ scope.tabs = []; $ scope.tabs.activeTab = 0;' – Carbonski 2013-03-24 03:09:45

那麼plnkr鏈接不工作，也可能是這個答案，細節可能不起作用（至少在最新版本中）。如果您設置了一個範圍（例如tabs.activeTab'），它會在第一次渲染指定範圍選項卡名稱時觸發，但每次更改選項卡時都不會更改。好吧，我還沒有找到這方面的解決方案，如果你有一個請分享:) – 2015-10-06 09:24:30

我發現現在有點解決這個問題。這似乎不是最好的方法，所以如果有人有更好的主意，請分享。

我意識到bsTabs指令爲每個選項卡創建數據切換屬性。通過觀看數據切換顯示的事件，我能夠識別標籤更改並顯示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-23 00:42:59 Carbonski

請看我更新的代碼。您也可以將tabs.activeTab用於標記驅動的選項卡 – 2013-03-23 07:23:17

如何獲取AngularStrap活動標籤？

回答

相關問題