在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
使用 ionic-v4 构建(打包).IPA 的 CLI 命令