CODEWITHSUNDEEP
javascriptangularjsionic-frameworkng-show
MatTaNg
MatTaNg

Reputation: 895

ng-show doesn't work with Ionic framework

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.

Upvotes: 0

Views: 1431

Answers (1)

the_mahasagar
the_mahasagar

Reputation: 1201

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>

Upvotes: 1

Related Questions