Modifying the sidebar navigation in Ionic for a user who is logged in

Is it possible to modify the side menu content based on whether a user is logged in or not?

Example 1 - user not logged in:

If a user isn't logged in, this side menu will be displayed.

https://i.stack.imgur.com/iY427.png

Example 2 - user is logged in:

When a user is logged in, additional menu items are shown. These extra items are visible only for logged-in users.

https://i.stack.imgur.com/cRhp8.png

In my controller:

$http.get('http://127.0.0.1:8080/elodieService/consommateurs/'+$localStorage.idconsommateur, { params: { "idconsommateur":$localStorage.idconsommateur, fields: "nom,prenom",format:"json"} }).then(function(result) {

                console.log(JSON.stringify(result.data));
                $scope.prenomconsommateurConnect=result.data.prenom;

In the view :

 <ion-header-bar class="bar-stable" >
                <h1 class="title" ng-hide="!prenomconsommateurConnect" ng-controller="accueilController">Bonjour Hello {{prenomconsommateurConnect}}</h1>
                <h1 class="title" ng-hide="prenomconsommateurConnect" ng-controller="accueilController">Bonjour Hello link</h1>

                </ion-header-bar>

However, I always see the result as "bonjour hello link". How can I fix this issue?

What approach should I take? Should I consider using ng-if, ng-show, or ng-hide? Or perhaps there is a better solution for this scenario?

Any assistance would be greatly appreciated.

javascriptangularjscordovaionic-framework

Answer №1

If you're wondering how to toggle visibility in AngularJS, you can either use ng-if or ng-show and ng-hide. Personally, I prefer using ng-if!

Here's an example implementation in a menu controller:

.controller('AppCtrl', function($scope, $ionicModal, $timeout,$ionicSideMenuDelegate,$http) {

$http.get('http://127.0.0.1:8080/elodieService/consommateurs/'+$localStorage.idconsommateur, {
  params: { "idconsommateur":$localStorage.idconsommateur, fields: "nom,prenom",format:"json"} })
  .then(function(result) {
  console.log(JSON.stringify(result.data));
    if(result.data.prenom) {
      $scope.prenomconsommateurConnect = result.data.prenom;
    }else{
      $scope.prenomconsommateurConnect = "";
    }
});

$scope.$watch(function () {
  return $ionicSideMenuDelegate.getOpenRatio();
}, function (value) {
  console.log("value " + value);
  $scope.getMenuProfile();
});

$scope.getMenuProfile = function () {
  if($scope.prenomconsommateurConnect === "" ){
    $scope.isLogin = false ;
  }else{
    $scope.isLogin = true ;
  }
};
}

And in the menu.html:

<ion-header-bar class="bar-stable">
  <h1 ng-if="!isLogin" class="title">Please Login</h1>
  <h1 ng-if="isLogin"  class="title">You are Logged In</h1>
</ion-header-bar>

I hope this explanation helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to automatically sync the scope/ng-model with a textbox value when it is altered by a third-party component?

I am looking to create an editor with a color picker feature. Below is a simplified example: http://jsfiddle.net/xcUev/8/ In my implementation, the color is treated as an attribute of an angular scope object. I have enabled it to be selected using a co ...

angularjscolor-pickerangularjs-scope

Angular http service set header for put request

Struggling with a temporary solution where the goal was to include a header in an http put request with the value 'username' : 'flastname'. The plan is to set this username header just before making the $http.put call within the service ...

angularjsresthttp

angular model bind include move

I'm working on developing custom elements that will transform my form elements to match the styling structure of Bootstrap's forms. Essentially, <my-input ng-model="myname"> should be transformed into <div class="form-element"> ...

javascriptangularjsangularjs-directive

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

Guide to updating the object value within an array in React

Is there a way to toggle the value of a specific object key called "clicked" to true using the spread operator in React? I want to be able to press a button and update the object's value. let questions = [ { title: "What do I want to learn ...

javascriptreactjs

Guide to retrieving and showing specific items from a DropDownList in a Text box using JavaScript, HTML, and AngularJS

Can someone explain how to extract and select items from a DropDownList and display them in a Textbox using JavaScript/HTML/AngularJS? Here are more details: I have a dropdown list with many items. When I click on an item from the list, it should be dis ...

javascripthtmlangularjs

How can I make a div or iframe stretch to fill the remaining space using javascript, jQuery, or css?

I'm looking for a way to make the middle iframe dynamically fill the remaining space between two fixed height iframes (one at the top and one at the bottom) regardless of the window screen size. Is there a technique or method that can achieve this? th ...

javascriptjqueryhtmlcssxhtml

Why am I not seeing my views when trying to export them from a file in my routes folder?

I've been tinkering around with basic routing in ExpressJS and up to this point, I have implemented two routes: app.get('/', function(req,res) { res.render('index'); }); app.get('/pics', function(req,res) { res.rend ...

javascriptnode.jsexpressurl-routing

The field 'XXX' is not a valid property on the type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

When creating a Vue component with TypeScript, I encountered an error message in the data() and methods() sections: Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>& ...

javascriptnode.jstypescriptvue.jsvue-component

Why is there a node_modules folder present in the npm package I authored when using it as a dependency in another module?

After successfully launching my first npm package, I noticed something strange when installing it as a dependency in my project. Upon exploring the project folder in node_modules, I discovered an unexpected node_modules folder containing just one package ...

javascriptnode.jsnpmdependenciesnode-modules

What is the official name of the key type for the Built-in Object?

There was a built-in type that I used in the past which represented the union of all possible object keys. It was named objectKey or something similar. Here is an example: type objectKey = string | number | symbol Unfortunately, I am drawing a blank on t ...

javascripttypescripttypes

Add an array as a nested child within another array using node.js and JavaScript

Description: I execute a MySQL query to retrieve rows from a table > connection.query(q2,function(err,rows){...} Assuming the rows have a structure like {id:",,,", time:"..." etc:"cc"} For each row, I then query another table to fetch additional dat ...

javascriptmysqlnode.js

Using Node.js and the Azure DevOps Node API, you can easily retrieve attachments from Azure DevOps work items

Encountering a problem while attempting to download an attachment for a work item in Azure DevOps. Utilizing the node.js 'azure-devops-node-api' client (https://www.npmjs.com/package/azure-devops-node-api) to communicate with ADO API. Retrieving ...

javascriptnode.jsazure-devops-rest-api

Executing function inside an Angular factory

I am currently working with an Angular factory that contains various functions. My goal is to use myService to retrieve data, and upon successful retrieval, call another function within the factory: myApp.factory('myFactory', function($http) { ...

javascriptangularjs

Smooth-scrolling feature with touch interaction available in the scrollbar extension

Anyone here aware of a high-quality jQuery or CSS plugin for scrollbars that supports touch functionality and smooth easing? I've been on the lookout for one, but haven't had any luck so far. Even if it comes with a price tag, I'm interested ...

javascriptjquerycss

Launch another modal and then deactivate the initial modal

Having two Modals has presented a challenge for me when it comes to closing the first modal after the second one is opened. I attempted a solution, but it prevented the second Modal from opening altogether. This code snippet below belongs to the first Mo ...

angulartypescriptionic-frameworkionic4

Is React-Apollo encountering a 404 network error?

I am currently exploring React-apollo and attempting to implement Server-side rendering with apollo, but I keep encountering a 404 error. Despite confirming that my graphQL endpoint is functional. Here is the specific error message: { Error: Network erro ...

javascriptreactjsexpressreduxapollo

What is the best approach to simultaneously update an array using multiple threads in a Node.js environment?

Hey there, I'm trying to figure out how to make changes to the same array using 2 worker threads in Node.js. Can anyone help me with this? My issue is that when I add a value in worker thread 1 and then try to access it in worker thread 2, the second ...

javascriptnode.jsmultithreadingworker-thread

Various tasks to be executed on a shared element

Struggling with implementing actions on a grid component without using a router in Next.js. Here is the current code snippet: const handleActions = (btnPress, row) => { if (btnPress === "Add") {/* implementation */} else if (btnPr ...

javascriptarraysnext.jscomponents

Error: Authorization requires both data and salt arguments

As a novice in NodeJS, I attempted to create an authentication form using NodeJS + express. The issue I am facing is regarding password validation - specifically, when "confirmpassword" does not match "password", it should return nothing. Despite my effo ...

javascriptnode.jsexpresserror-handlingauthorization