Question

我有一个有4个标签的Ionic Framework应用程序。但我只想在任何时候看到三个标签。

前两个标签始终可见（称为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-show”和“ng-hide”。

确定要显示哪个选项卡的条件存储在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变量的变化作出反应

Answer 1

使用离子标签属性隐藏

<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';

如何根据条件

1 个答案: