在 angularjs 和 ionic-v1 中的一个常见标题栏中仅显示一个图标

Question

我有一个使用Angularjs和Ionic-v1的应用程序。

我有一个通用的标题栏，其中有 2 个图标(一个用于 Tab1，一个用于 Tab2(。在屏幕底部，我有2个选项卡(选项卡1和选项卡2(。

当我在 Tab1 中时，我只想显示 Tab1 的图标。当我在 Tab2 中时，我只想显示 Tab2 的图标。

<div  ng-click="menu.changeLayout()">
                    <a class="icon_one"  ng-if="!grid"></a>
                    <a class="icon_change"  ng-if="grid"></a>
                    <a class="icon_one_test" ng-if="!grid1"></a>
                    <a class="icon_change_test"  ng-if="grid1"></a>
                </div>

In this line   <a class="icon_one_test" ng-if="!grid1"></a> ,Is there any way to hide icon_one and icon_change class?Or is there any other way to do this.

角度代码

$rootScope.grid=false;
$rootScope.grid1=false;

menu.changeLayout=function(){
    console.log("current state"+$state.current.name);
    if($state.current.name=='menu.tab1'){
        console.log('tab1');
        $rootScope.grid=!$rootScope.grid;
    }
    else if($state.current.name=='menu.tab2'){
        console.log('tab2');
        $rootScope.grid1=!$rootScope.grid1;
    }
}

如何实现这一点。谁能帮我怎么做。

Answer 1

使用ng-class根据条件设置类。

<div  ng-click="menu.changeLayout()">
       <a ng-class="{icon_one: !grid , icon_change: grid}" ></a> 
       <a ng-class="{icon_one_test: !grid , icon_change_test: grid}" ></a>  
</div>

在条件内也隐藏未选择的选项卡。

 if($state.current.name=='menu.tab1'){
        console.log('tab1');
        $rootScope.grid= true;
        $rootScope.grid1 = false;
    }
    else if($state.current.name=='menu.tab2'){
        console.log('tab2');
        $rootScope.grid1=true;
        $rootScope.grid= false;
    }