如何根據條件交換Ionic中的選項卡

我有一個具有4個選項卡的Ionic Framework應用程序。但我只想在任何時候都顯示三個標籤。如何根據條件交換Ionic中的選項卡

前兩個標籤始終可見（稱爲Tab1和Tab2）。但是第三個標籤需要是兩個不同內容之間的一個或另一個，但不能同時存在（稱爲Tab 3a和Tab 3b）。所以你會有Tab1，Tab2，Tab3a或Tab1，Tab2，Tab3b。

對於HTML，我想出了這個：

<ion-tab title="Tab 1" href="#/tab/1" > 
    <ion-nav-view name="tab-timeline"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Tab 2" href="#/tab/2" > 
    <ion-nav-view name="tab-2"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Tab 3a" href="#/tab/3a" class="{{enableTab3a()}}"> 
    <ion-nav-view name="tab-3a"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Tab 3b" href="#/tab/3b" class="{{enableTab3b()}}"> 
    <ion-nav-view name="tab-3b"></ion-nav-view> 
    </ion-tab>

現在我需要一個指令，將切換上Tab3a和Tab3b類具有「NG-秀」和「NG隱藏」基於條件。

確定，以顯示存儲在localStorage的變量和訪問在這樣的控制器，其選項卡的條件：

if(window,localStorage["tab3"] == 'a' { 
    $scope.tab3a = true; 
    $scope.tab3b = false; 
} else { 
    $scope.tab3a = false; 
    $scope.tab3b = true; 
}

如何建立觸發基於條件的類指令，並顯示只有正確的選項卡（Tab3a或Tab3b）？

附加信息：

我有5個控制器。每個標籤都有一個控制器，tabs.html有一個控制器。這就是爲什麼我認爲一個指令是最適合這個，如果該指令可以在localStorage的變量

來源

2016-01-21 lilbiscuit

我以前用ng-if看過這個例子。它可能有幫助。 http://codepen.io/ajoslin/pen/hugIn?editors=1010 – AdsHan

使用隱藏離子標籤屬性變化作出反應

<ion-tab title="Tab 3a" href="#/tab/3a" hidden="{{tab3a}}"> 
    <ion-nav-view name="tab-3a"></ion-nav-view> 
</ion-tab> 

<ion-tab title="Tab 3b" href="#/tab/3b" hidden="{{!tab3a}}"> 
    <ion-nav-view name="tab-3b"></ion-nav-view> 
</ion-tab>

，並在控制器

$scope.tab3a = window.localStorage["tab3"] == 'a';

來源

2016-01-21 21:11:17 Hisham

每個標籤都有自己的控制器。所以我將不得不在多個控制器中設置$ scope.tab3a。這是在Angular中實現它的最佳方式，還是指令或服務更適合於此？ – lilbiscuit

如果tabs.html有一個控制器，則可以將該值存儲在此控制器的作用域中。並使用$ scope從tab控制器訪問它。$ parent.tab3a變量 – Hisham

那麼這樣做是否解決了您的問題？ – Hisham

如何根據條件交換Ionic中的選項卡

回答

相關問題