rogodeter rogodeter - 1 month ago 11
Javascript Question

AngularJS ng-show not behaving as expected

I have two divs that I want to show/hide based on whether user is logged in. I know user is logged in based on whether there are particular query params when the application loads. (It's contrived and it's for a demo) So when page loads, I have a var in the controller called login, which I initialize to false.

I use $scope.init to run some code after the page loads to test for the query params and set my login field appropriately. I've tried

ng-show="login"
as well as
ng-show="login == false/true"
. It never seems to display or hide.. it just always hides. What am I doing wrong?

<div class="pull-right" style="padding-top: 16px;">
<a ng-show="login == false" ng-href="http://someSite/authorize">Login</a>
</div>
<div ng-show="login == true" class="pull-right" style="padding-top: 16px;">
Welcome, {{fullName}} - <img width="40" height="50" ng-src="{{picture}}"/>
</div>


And in my controller -- omitted as much as possible for brevity

var app = angular.module('showtime', [], function($locationProvider) {
$locationProvider.html5Mode({enabled:true, requireBase: false});
});

app.controller('showtimeController', function ($scope, $location, $http, $httpParamSerializer) {

$scope.login = false;

$scope.init = function () {
$scope.oauth.authuser = $location.search()['authuser'];
$scope.oauth.session_state = $location.search()['session_state'];
$scope.oauth.prompt = $location.search()['prompt'];

$scope.qs = $httpParamSerializer($scope.oauth);

// ...

if ($scope.oauth.state) {
console.log('returning from an access code flow with tokens and more');
$http.get('http://someApi/code' + '?' $scope.qs).then(function (response) {
$scope.picture = response.data.picture;
$scope.login = true;
});
}
};
});

Answer

Try

login === true

or

<div ng-show="!!login" class="pull-right" style="padding-top: 16px;">

Also can you try and print to the console and see if login value shows ?