Return to Question

Improved Formatting; Fixed grammar; Improved title

edited Aug 20, 2015 at 13:44

12.1k
5
41
94

Using ng-show and ng-hide within a ng-repeat Navigational bar content built depending on login state

And in my insideInside my login controller (LoginCtrl), I attach the LoginServiceLoginService to a local scope object and on the successful login callback function I turn the loggedInloggedIn value to true like so.

The boolean changes the way it should and I wanted to change the navigation appearance based on a user logging in, so inside my navigation controller I've attached the LoginServiceLoginService to a local scope object again and created a function to return true or false like so.

And I'm using Controller as syntax and the htmlThe HTML looks like this:

Essentially I just want, the purpose is for a login/register nav link to disappear when a user logs in and some more unique features in the navigation to appear for logged in users.

Using ng-show and ng-hide within a ng-repeat

And in my inside my login controller I attach the LoginService to a local scope object and on the successful login callback function I turn the loggedIn value to true like so.

The boolean changes the way it should and I wanted to change the navigation appearance based on a user logging in, so inside my navigation controller I've attached the LoginService to a local scope object again and created a function to return true or false like so.

And I'm using Controller as syntax and the html looks like this

Essentially I just want the login/register nav link to disappear when a user logs in and some more unique features in the navigation to appear for logged in users.

Navigational bar content built depending on login state

Inside my login controller (LoginCtrl), I attach the LoginService to a local scope object and on the successful login callback function I turn the loggedIn value to true like so.

I wanted to change the navigation appearance based on a user logging in, so inside my navigation controller I've attached the LoginService to a local scope object again and created a function to return true or false like so.

The HTML looks like this:

Essentially, the purpose is for a login/register nav link to disappear when a user logs in and some more unique features in the navigation to appear for logged in users.

Source Link

asked Aug 20, 2015 at 13:31

Sean Parsons

Using ng-show and ng-hide within a ng-repeat

I created a login service which holds a boolean based on if a user is logged in or not.

 angular.module('deafApp') .service('LoginService', function(){ var $this = this; $this.loggedIn = false; });

And in my inside my login controller I attach the LoginService to a local scope object and on the successful login callback function I turn the loggedIn value to true like so.

angular.module('deafApp') .controller('LoginCtrl', ['Auth', '$scope', 'LoginService', function(Auth, $scope, LoginService) { $scope.Login = LoginService; $scope.loginUser = function() { Auth.$authWithPassword({ email: $scope.email, password: $scope.password }).then(function(authData) { console.log("Logged in as:", authData.uid); /* WHERE I CHANGE THE VALUE TO TRUE */ $scope.Login.loggedIn = true; }).catch(function(error) { console.error("Authentication failed:", error); }); } }]);

The boolean changes the way it should and I wanted to change the navigation appearance based on a user logging in, so inside my navigation controller I've attached the LoginService to a local scope object again and created a function to return true or false like so.

angular.module('deafApp') .controller('NavCtrl', [ 'LoginService',function(LoginService){ var $this = this; $this.Login = LoginService; $this.isShowing = false; $this.showToggle = function() { $this.isShowing = !$this.isShowing; }; $this.goHome = function() { $this.isShowing = false; }; /* THIS FUNCTION RETURNS VALUE OF LOGGED IN */ $this.userLoggedIn = function() { return $this.Login.loggedIn; } $this.navLinks = [ {name: 'About-us', ref:'about', title: 'About DeafandHoh Page'}, {name: 'Facts', ref: 'facts', title: 'Facts & Deaf Empowerment Page'}, {name: 'News', ref: 'news', title: 'News Page'}, {name: 'Products', ref: 'products', title: 'Products Page'}, {name: 'Directory', ref: 'directory', title: 'Directory Listings Page'}, {name: 'Resources', ref: 'resources', title: 'Resources Page'}, {name: 'Login / Register', ref: 'login', title: 'Login & Register Page', hide: 'nav.userLoggedIn()'}, {name: 'Profile', ref: 'profile', title: 'User Profile Page', show: 'nav.userLoggedIn()'}, {name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!', show: 'nav.userLoggedIn()'}, {name: 'Logout', ref: 'logout', title: 'Logout', show: 'nav.userLoggedIn()'} ]; }]);

I then attached it a hide and show property to several of the navLinks which get repeated that I want to either hide when truthy and show when truthy.

{name: 'Login / Register', ref: 'login', title: 'Login & Register Page', hide: 'nav.userLoggedIn()'}, {name: 'Profile', ref: 'profile', title: 'User Profile Page', show: 'nav.userLoggedIn()'}, {name: 'Chatroom', ref: 'chatroom', title: 'Come Chat!', show: 'nav.userLoggedIn()'}, {name: 'Logout', ref: 'login', title: 'Login & Register Page', show: 'nav.userLoggedIn()'}

And I'm using Controller as syntax and the html looks like this

<li ng-repeat="nav in nav.navLinks"> <a title="{{nav.title}}" ui-sref="{{nav.ref}}" ng-bind="nav.name" ng-hide="nav.hide" ng-show="nav.show"></a> </li>

Essentially I just want the login/register nav link to disappear when a user logs in and some more unique features in the navigation to appear for logged in users.

javascript angular.js