與AngularJS切換信息框

這是我在AngularJS上的第一個個人項目，所以在代碼上可能有些明顯的東西，我看不到它。與AngularJS切換信息框

我有兩個div，每個div都有一個圖標。第一個有一個信息圖標，第二個有一個退出圖標。

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

我可以點擊退出或信息圖標來顯示和隱藏第一個div。這裏是我的控制器的相關部分：

myCtrl.showInfo = true; 

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

它適用於第一次點擊，但在此之後的價值myCtrl.showInfo從false轉向0和它停止工作。

版本：1.5.8角

來源

2016-11-03 Tasos

顯示完整的代碼 – Sajeetharan

如果沒有邏輯相連這個動作，比顯示/隱藏其他，那麼你可以在你的控制器中沒有任何功能。

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

來源

2016-11-03 12:07:54

看來這個工作，它是更清潔的方式。謝謝。在SO – Tasos

的時間限制之後會接受答案@在控制器內部有代碼的TASOS會使它更易於測試，而不是將它放在模板上？也不必要地它會混亂你的模板 –

你有一個錯誤的切換表達，做到這一點糾正下面使用!。

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

來源

2016-11-03 12:05:09

使用ng-if代替ng-show和變化控制器功能：

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

來源

2016-11-03 12:07:07 ranakrunal9

與AngularJS切換信息框

回答

相關問題