在angularjs和ionic-v1的一个公共标题栏中只显示一个图标 [英] Show only one icon in one common headerbar in angularjs and ionic-v1

问题描述

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

我有一个共同的标题栏，其中有两个图标（一个用于Tab1，一个用于Tab2）。
在屏幕底部，我有两个选项卡（Tab1和Tab2）。

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

 < div ng-click =菜单。 changeLayout（）> 
< a class =icon_oneng-if =！grid>< / a> 
< a class =icon_changeng-if =grid>< / a> 
< a class =icon_one_testng-if =！grid1>< / a> 
< a class =icon_change_testng-if =grid1>< / a> 
< / div> 
 
 
 
在这一行< a class =icon_one_testng-if =！grid1>< / a> ，有什么办法可以隐藏icon_one和icon_change类吗？还是有其他方法可以做到这一点。 
  

角码

  $ 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; 
} 
  

I have an application using Angularjs and Ionic-v1.

I have a common headerbar where i have 2 icons(one for Tab1 and one for Tab2). And in the bottom of the screen i have 2 tabs(Tab1 and Tab2).

When i am in Tab1,i want to show icon for Tab1 only.And when I am in Tab2 i want to show icon for Tab2 only.

<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.

Angular code

$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;
    }

}

How to achieve this.Can anyone please help me how to do this.

解决方案

use ng-class to set the classes according to conditions.

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

inside the condition hide the unselected tabs also.

 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的一个公共标题栏中只显示一个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！