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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在angularjs和ionic-v1中的一个公共标题栏中仅显示一个图标相关的知识,希望对你有一定的参考价值。

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

我有一个共同的标题栏,我有2个图标(一个用于Tab1,一个用于Tab2)。在屏幕的底部我有2个标签(Tab1和Tab2)。

当我在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;
    }

}

如何实现这一目标。任何人都可以帮我解决这个问题。

答案

使用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;
    }

以上是关于在angularjs和ionic-v1中的一个公共标题栏中仅显示一个图标的主要内容,如果未能解决你的问题,请参考以下文章

使用 ionic-v3 和 cordova 6.3.0 警告 Android API 级别 28

一个模块中的 AngularJS 指令和另一个模块中的模板

使用 ionic-v4 构建(打包).IPA 的 CLI 命令

angularjs怎么编写一个公共的弹出层插件

使用 Ionic-v3 加载位于设备内部的视频时,HTML5 视频播放器出错

angularjs 自定义弹窗指令