我有一个使用 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.
Angular 代码
$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;
}
关于html - 在 angularjs 和 ionic-v1 中的一个公共(public)标题栏中只显示一个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48020325/