Ng-Show With Cookies
Question
I am trying to set the ng-show variable isloggedout with the cookie Value, which is working (therefore the $scope.isloggedout is either true or false) which should trigger the ng-show or ng-hide which is clearly not working.
My App controller:
app.controller('projectCtrl', ['$scope', '$http', '$location', '$cookies', '$cookieStore', '$window',
function($scope, $http ,$location,$cookies,$cookieStore,$windows) {
$scope.isloggedout = $cookieStore.get('value');
}]);
My HTML:
<html ng-app="rjtApp" ng-controller="projectCtrl">
<div >
<ul class="nav navbar-nav navbar-right" >
<li><a href="#Signout" >Login <span class="glyphicon glyphicon-user" ng-show="isloggedout"></span></a></li>
<li><a href="#Login" >LogOut <span class="glyphicon glyphicon-user" ng-show="!isloggedout"></span></a></li></ul>
</div>
</html>
any help?
1 answers
solution1
0 2015-12-09 18:47:56
I tried your code and I can't well understand why you are doing so, using the ng-show directive only in the span. I can think that you want to either show or hide one button so I adapted your html:
<html ng-app="rjtApp" ng-controller="projectCtrl">
<body>
<div>
<ul class="nav navbar-nav navbar-right">
<li ng-show="isloggedout"><a href="#Signout">Login <span class="glyphicon glyphicon-user"></span></a></li>
<li ng-hide="isloggedout"><a href="#Login">LogOut <span class="glyphicon glyphicon-user"></span></a></li>
</ul>
</div>
<!-- You will need to import here your angular.js file and your personal js files. -->
</body>
</html>
I will also advice you to confine the var inside the controller so that you won't dirt the scope. The controller will be:
app.controller('projectCtrl', ['$scope', '$http', '$location', '$cookies', '$cookieStore', '$window', function($scope, $http ,$location,$cookies,$cookieStore,$windows) {
var self = this;
self.isloggedout = $cookieStore.get('value');
}]);
and the HTML:
<html ng-app="rjtApp" ng-controller="projectCtrl as pc">
<body>
<div>
<ul class="nav navbar-nav navbar-right">
<li ng-show="pc.isloggedout"><a href="#Signout">Login <span class="glyphicon glyphicon-user"></span></a></li>
<li ng-hide="pc.isloggedout"><a href="#Login">LogOut <span class="glyphicon glyphicon-user"></span></a></li>
</ul>
</div>
<!-- You will need to import here your angular.js file and your personal js files. -->
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.