0

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

}

これを達成する方法誰でもこれを行う方法を教えてください。

4

1 に答える 1

0

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;
    }
于 2017-12-29T15:14:49.603 に答える