Tasos Tasos - 1 month ago 5
AngularJS Question

Toggle an info box with AngularJS

This is my first personal project on AngularJS, so there might be something obvious on the code and I cannot see it.

I have two divs which each of them have an icon. First one have an info icon and the second one an exit icon.

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


I can either click on the exit or info icon to show and hide the first div. Here is the related part of my controller:

myCtrl.showInfo = true;

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


It works on the first click, but after that the value
myCtrl.showInfo
turned to
0
from
false
and it stops working.

Version: Angular 1.5.8

Answer

If no logic is tied to this action, other than a show/hide, then you could do it without a function in your controller.

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