2017-04-06 87 views
0

我有一個tabset,如果第一個選項卡被禁用,則內容在頁面加載時仍顯示。當單擊另一個選項卡時,第一個選項卡將被禁用,並且無法點擊,這很好。 uib-tabset在禁用時顯示內容

這裏是一個簡單的例子(disable屬性被授權/角設置):

<div class="col-md-12" data-ng-controller="myCtrl as vm"> 
    <div class="col-md-12"> 
     <h2>Title</h2> 

     <div data-uib-tabset=""> 
      <div data-uib-tab="" index="0" data-heading="tab 1" disable="true')"> 
       <div class="col-md-12 vertical-gutter"> 
        ... 
       </div> 
       <div class="clearfix"></div> 
      </div> 
      <div data-uib-tab="" index="1" data-heading="tab 2"> 
       <div class="col-md-12 vertical-gutter"> 
        ... 
       </div> 
       <div class="clearfix"></div> 
      </div> 
      <div data-uib-tab="" index="2" data-heading="tab 3"> 
       <div class="col-md-12 vertical-gutter"> 
        ... 
       </div> 
       <div class="clearfix"></div> 
      </div> 
     </div> 
    </div> 
</div> 

你怎麼隱藏禁用選項卡中的內容,使頁面上的「第一次活動選項卡」活動加載?

一種選擇是NG-顯示/ NG,如果使用,但後來我還需要做出「第一活動選項卡」活動

+1

「先激活的標籤」 我的意思是第一個啓動的選項卡。 – Babulaas

回答

0

聲明控制器中的變量。 (vm.activeTab) 該值將由函數設置,並且在前端將用角度檢索值。

設置活動屬性將在init頁面加載中顯示正確的選項卡。

HTML:

<div data-uib-tabset="" active="vm.activeTab"> 

控制器:

vm.activeTab = 1; 
0

怎麼這樣呢?

<div data-uib-tab="" index="0" data-heading="tab 1" disable="expression"> 
    <div class="col-md-12 vertical-gutter"> 
     <div ng-hide="expression"> 
      content 
     </div> 
    </div> 
    <div class="clearfix"></div> 
</div> 

或者只是讓另一個標籤活躍在默認情況下,如果第n個一個是禁用

+0

這不起作用,因爲它只會隱藏內容。你會得到一個空白標籤。我需要設置第一個活動選項卡的索引。我可以爲此編寫一個自定義方法。 我只需要知道是否有自動執行此操作的設置。 – Babulaas

+0

您描述的功能不是內置的,但它很容易實現。例如你可以在你的控制器中存儲一個布爾值數組,使用類似'Array.prototype.find'的方法遍歷它們並獲得你的第一個啓用的選項卡。如果你願意,我可以修補一個現場例子。 – svarog