AngularJSで情報ボックスを切り替える

Question

これはAngularJSの私の最初の個人的なプロジェクトなので、コード上に明白なものがあり、私はそれを見ることができません。

私は2つのdivを持っていて、それぞれにアイコンがあります。最初は情報アイコンがあり、もう1つは終了アイコンです。

<div class="info" ng-show="myCtrl.showInfo"> 
    <i class="fa fa-close" ng-click="myCtrl.toggleInfo()"></i> 
    <p>Lorem ipsum....</p> 
</div> 

<div class="settings" ng-show="myCtrl.showInfo"> 
    <i class="fa fa-close" ng-click="myCtrl.toggleInfo()"></i> 
    <p>Lorem ipsum....</p> 
</div> 

exitまたはinfoアイコンをクリックすると、最初のdivの表示と非表示を切り替えることができます。ここに私のコントローラの関連部分は次のとおりです。

myCtrl.showInfo = true; 

myCtrl.toggleInfo = function() { 
    myCtrl.showInfo ^= myCtrl.showInfo; 
} 

それは、最初のクリックで動作しますが、その後の値myCtrl.showInfoがfalseから0になって、それが働いて停止します。

バージョン：1.5.8

Answer 1

何のロジックは、表示/非表示以外のこの行動に結びついていない場合は、あなたのコントローラには機能がなくてもそれを実行できます。

<div class="settings" ng-show="myCtrl.showInfo"> 
    <i class="fa fa-close" ng-click="myCtrl.showInfo = !myCtrl.showInfo"></i> 
    <p>Lorem ipsum....</p> 
</div> 

Answer 2

角度は、あなたは!を使用して以下にそれを修正しない、間違ったトグル式を持っていました。代わりにng-showと変更コントローラ機能の

myCtrl.toggleInfo = function() { 
    myCtrl.showInfo = !myCtrl.showInfo; 
} 

Answer 3

使用ng-if：

<div class="info" ng-if="myCtrl.showInfo"> 
    <i class="fa fa-close" ng-click="myCtrl.toggleInfo()"></i> 
    <p>Lorem ipsum....</p> 
</div> 

<div class="settings" ng-if="!myCtrl.showInfo"> 
    <i class="fa fa-close" ng-click="myCtrl.toggleInfo()"></i> 
    <p>Lorem ipsum....</p> 
</div> 

//コントローラ

myCtrl.showInfo = true; 

myCtrl.toggleInfo = function() { 
    myCtrl.showInfo != myCtrl.showInfo; 
}