CODEWITHSUNDEEP
angularjs
Tasos
Tasos

Reputation: 7577

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

Upvotes: 0

Views: 664

Answers (3)

Alex Szabo
Alex Szabo

Reputation: 3276

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>

Upvotes: 1

ranakrunal9
ranakrunal9

Reputation: 13558

Use ng-if instead of ng-show and change controller function :

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

//Controller

myCtrl.showInfo = true;

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

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

You had a wrong toggling expression, do correct it to below using !.

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

Upvotes: 0

Related Questions