CODEWITHSUNDEEP
javascriptangularjs
Foster
Foster

Reputation: 385

AngularJS ng-show and ng-hide doesn't work

having a problem with angularjs logic here

I want to show the login link only when there is no user loggedin, and only show the logout link to logged in user, but it doesnt work properly

my HTML

 <section ng-controller="a" ng-show="auth = false">
    <a href="#/signin" ng-click="signin()"> Sign in </a>
 </section>

 <section ng-controller="b" ng-show="auth = true">
    <a href="#/signout" ng-click="signout()"> Sign out </a>
 </section>

The sign in is working well

this is my Controller

login Controller

 function ($scope, Service){
 $scope.auth = true;
 $scope.signin = function($event, userID, passwd){ 

                 Service.signin(userID,passwd).then( 
                        function (response){
                            $scope.auth = true; 
                  });
 }]).

logout Controller

  function ($scope, Service){
  $scope.auth = false; 
  $scope.signout = function($event){ 
                 Service.signout().then( 
                        function (response){
                            $scope.auth = false;    
                  });
  }]).

those 2 log out and log in links are basically in my main page. I dont want to create a lot of pages, therefore I want to hide each other. When the user click the log in link, it will run the angularjs router, in this case /login, there is another templateURL for the form and it will be appended directly to the main page. Once the user has typed in the userID and password, the user need to click submit button, this is the code

<form role="form" name="form1">
    <label for"userID">UserID</label><input type="text" id="userID" ng-model="userID">
    <label for"passwd">Password</label><input type="text" id="passwd" ng-model="passwd">
    <button data-ng-click="signin($event,userID,passwd); reload()">Login</button>

the reload() function will directly refresh the page. I am using the $window.location.reload()

Upvotes: 0

Views: 1011

Answers (3)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

Actually You need Two works for this task

First Work:-

You need to assign auth varibale in $rootScope not $scope. because this object used in two controller.

Like 

function ($scope, dataService, $rootScope){
 $scope.auth = true;
 $scope.signin = function($event, userID, passwd){ 

                 Service.signin(userID,passwd).then( 
                        function (response){
                            $rootScope.auth = true; 
                  });
 }]).

Second Work:

You need to change ng-show="auth = false" to ng-show="auth === false". You have used single equal. it should be double or triple equal

OR

if you assigned the object in $rootScope, then you don't need to check the condition for is true or false in the element. because you already define auth is false or true in your controller. So you can just call ng-show="auth only.

Upvotes: 1

sma
sma

Reputation: 9597

Your equals comparison is incorrect.

This is assigning a value of false to auth:

ng-show="auth = false"

What you want is this (double and triple equals do comparisons)

ng-show="auth === false"

You can also do this:

<section ng-controller="a" ng-show="!auth">
    <a href="#/signin" ng-click="signin()"> Sign in </a>
 </section>

 <section ng-controller="b" ng-show="auth">
    <a href="#/signout" ng-click="signout()"> Sign out </a>
 </section>

Upvotes: 1

jsNovice
jsNovice

Reputation: 646

Just try the following

ng-show="auth"

Please let me know if it is still not working..

Upvotes: 0

Related Questions