Using the ng-if condition in navigation is causing issues with functionality

Hey there, I'm having an issue with my navigation when using ng-if condition in ul. Can someone please assist me with resolving this problem?


        <nav id="menu" class="nav-main" role="navigation">
            <ul class="nav nav-main" ng-if=" $ctrl.getCurrentUser().user_type == 'Customer'">
                <li class="">
                    <a href="/dashboard">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="nav-parent">
                    <a href="#">
                        <i class="fa fa-table" aria-hidden="true"></i>
                        <span>Jobs</span>
                    </a>
                    <ul class="nav nav-children">
                        <li><a href="/addjob">Add New Job</a></li>
              </ul>
                </li>

<ul class="nav nav-main" ng-if=" $ctrl.getCurrentUser().user_type == 'Customer'">
javascriptangularjsangularjs-directive

Answer №1

I encountered the same issue and found a solution that worked for me.

First, make sure to declare in your controller:

$scope.user = $this->getCurrentUser();

Instead of using ng-if, switch to ng-show like so:

<ul class="nav nav-main" ng-show=" user.user_type == 'Customer'">

Give this approach a try and see if it resolves the problem for you.

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

Vue Js: Creating an array of checkboxes

I have a collection of checkboxes sourced from the main system object where I store all system settings (referred to as getSystem{}). Within this form, I am retrieving information about a User, who possesses an array of roles []. How can I cross-reference ...

javascriptvue.jsvuejs2

In a JavaScript project, encountering an error when using FB.logout that states "The expression is undefined and not a function."

Seeking to integrate Login with FB into my react website. FB.init({ appId : app_id, cookie : true, xfbml : true, version : 'v5.0' }); Followed by FB.getLoginStatus(({status}) => { if (status === 'conn ...

javascriptreactjsfacebook-login

Is it possible to trigger a directive using a function and then access the generated style?

My directive is designed to randomly select a color and assign it to a new user as an avatar. The random color generation and directive functionality are working as expected, but I'm looking to expand the functionality further and need some assistance ...

javascriptangularjs

Having trouble with JQuery click function not executing on initial click?

As I scoured through various resources looking for solutions to issues similar to mine, I stumbled upon numerous helpful insights. However, after going through approximately 15 of them, I hit a roadblock in finding someone who has encountered the exact sam ...

javascriptjquery

Utilizing the power of THREE.ShaderLib.phong while integrating subsurface scattering within ThreeJS

My mesh utilizes a ShaderMaterial with THREE.ShaderLib.phong uniforms. I have successfully linked the map, bump, and specular maps textures. The code snippet below demonstrates this: defines = {}; defines["USE_MAP"] = ""; defines["USE_BUMPMAP"] = ""; defi ...

javascriptthree.jsfragment-shadervertex-shader

Having trouble getting Node.js to run Express.js and React.js simultaneously

My tech stack consists of reactjs for the frontend and expressjs for the backend API. I experimented with the following setup: { "name": "carweb", "version": "0.1.0", "private": true, "dependencies": { // list of dependencies }, "scripts ...

javascriptnode.jsreactjsexpress

Creating a dynamic carousel inside a modal using Bootstrap and AngularUI

I'm currently working on developing an image gallery with Angular UI and Bootstrap. The gallery is designed to have 4x4 rows of photos, allowing users to click on a photo to open it in a modal window. In this modal window, I want to display the photo ...

angularjstwitter-bootstrap

Ideal JavaScript data structure for connecting three arrays

My goal is to establish a connection between three arrays in the following manner: arr1 = ['A', 'A', 'B', 'B', 'C', 'C' 'A', 'C'] arr2 = ['a', 'aa', ' ...

javascriptangular

Opening new windows in Chrome after an AJAX request behaves like a pop-up

When a user clicks a button in my application, an ajax request is triggered. Following the success of this request, I generate a URL which I intend to open in a new tab. Unfortunately, when using Chrome and calling window.open within the success handler, t ...

javascriptajaxgoogle-chrome

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

javascriptcssflexboxmaterial-ui

Button Fails to Respond on Second Click

I have a button that triggers a JavaScript function. This function, in turn, initiates two sequential AJAX calls. Upon completion of the first call, it performs some additional tasks before proceeding to the second AJAX call. The button functions correctl ...

javascriptjqueryhtmlajax

Restrict Text Input Field to Accept Only Specific Domain

Hey there! I've set up a text input box for users to link their Tripadvisor page to their profile. I want to make sure that when they paste the URL in, it is checked for the correct format. For example, if someone pastes: or , then allow the link. Ho ...

javascriptjqueryhtmlformsurl

Methods for transferring data from an AJAX function

I have a database containing various links that I would like to retrieve and store within an array. I attempted to achieve this using the following code: var amz = new Array(); function CreateAmazonArray() { $.ajax({ url: "php/amazon_affilia ...

javascriptphpajax

Stop the parent script from executing

I recently encountered an issue with my DotNetNuke website. Embedded within the DNN code is a script that triggers a function called WebForm_OnSubmit(). However, I noticed that this function is also being triggered when I try to perform a search on a speci ...

javascriptjquerydotnetnuke

The comparison between 'MutableRefObject<string | null>' and 'string' will never be true, as they do not share any common types. Error code: TS2367

Struggling with a React and TypeScript issue I have stored the email and password in state variables const emailRef = useRef<string | null>(null); const passwordRef = useRef<string | null>(null); This is how I set them: const onEmailChange = ...

javascriptreactjstypescript

Using JavaScript variables in a Jinja array

I encountered a frustrating issue that has been causing me some trouble. In my project setup, data is being transferred from Python to the frontend using Jinja in the form of a 2D list. My goal is to loop through this array using a for loop, but I'm ...

javascriptpythonhtmlflaskjinja2

Exploring the various situations in which async/await can be used shows

Could you explain the discrepancy between the scenarios below? scenario 1 - async-await in axios request - DOES NOT WORK export const getAll = async () => { const retrievedData = await axios.get('http://localhost:3001/anecdotes'); // sho ...

javascriptreactjspromiseasync-await

What is the process for converting an image to base64 using TinyMCE?

This snippet is from my TinyMCE configuration: { ... plugins: 'code paste', paste_data_images: true, ... } When I upload images through simple drag and drop in TinyMCE, the local images are displayed as Blob encoded images. I am trying to encode ...

javascriptphpbase64tinymce

Loop through the array while handling a promise internally and ensure completion before proceeding

I am currently working on populating a response array with Firestore snapshots and creating download links for stored files within each snapshot. Despite trying various solutions involving Promises, the response array consistently ended up being null. do ...

javascriptnode.jstypescriptfirebaseexpress

What is the best way to retrieve the current user data following a page refresh?

My current approach to this functionality is shown below: angular .module('mean-starter') .factory('Auth', function($http, $state, $window, $cookies) { var currentUser = {}; return { signup: function(user) { ...

angularjs