ng-show doesn't work with Ionic framework

Question

So i'm just trying to make a button where it changes based on whether or not the user is logged in or not. Heres what I want:

    <ion-view view-title="Settings">
       <ion-nav-buttons side="right">
 <a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
   <button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
     Log Off
   </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
   <button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
     Log On
   </button>
       </ion-nav-buttons>

For some reason it only shows the second button(The Log On button) if I am not logged in and if I am logged on it doesn't show anything at all. I've even straight up set ng-show for log on to false and log off to true and it still gave me the same result:

  <ion-view view-title="Settings">
       <ion-nav-buttons side="right">
 <a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
  <button ng-show="true" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
     Log Off
   </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
   <button ng-show="false" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
     Log On
   </button>
       </ion-nav-buttons>

Switching the value of ng-show of the Log on button to true and the log off button to false shows the log on button. Makes no sense...Heres my JS code:

     .controller("settingsController", function($scope, $cordovaSQLite, Settings, $location) {
       $scope.isLoggedOn = Settings.getLoggedOn();
       $scope.signIn = function(form) {
 console.log(Settings.logIn(form.email, form.password));
 console.log($scope.isLoggedOn);
 $scope.isLoggedOn = Settings.getLoggedOn();
       //  console.log($scope.isLoggedOn);

       };
       $scope.signOff = function() {
 Settings.logOff();
       };
     });

Note that these are code snippets so you may not find all the closing tags. Basically my problem is no matter what I do to either ng-show of log on or log off buttons the log off button(the first button) never shows no matter what I do. I tried ng-if too yielded the same result.

Thanks.

Are u sure that Settings.getLoggedOn() returns boolean ? If you are not sure, just assign true to $scope.isLoggedOn inside the signIn function — Arif
– Arif, Commented Jan 2, 2016 at 18:56

the_mahasagar · Accepted Answer · 2016-01-03 04:35:24Z

1

well,looks like..<ion-nav-buttons side="left"> is overriding the other one..!

try this:

<ion-nav-buttons side="left" >
      <button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
        Log On
      </button>
      <button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
        Log Off
      </button>
</ion-nav-buttons>

answered Jan 3, 2016 at 4:35

the_mahasagar

1,2012 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MatTaNg Over a year ago

Thanks this worked! I've been struggling with this for days I can't believe how obvious the solution was.

Collectives™ on Stack Overflow

ng-show doesn't work with Ionic framework

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related