Utilizing ng-switch for handling null values or empty strings

Can anyone assist me with this issue? I have a variable called $rootScope.user = {name:"abc",password:"asd"}. When a service response occurs, I am dynamically creating a rootscope variable by assigning it. How can I use ng-switch to check if the variable has a value (not null or undefined)?

<section ng-switch on="user">
      <span ng-switch-when="null">{{user.name}}</span>
      <span ng-switch-default>Hello</span>
 </section>

Your help is much appreciated. Thank you.

Answer №1

In order to access the $rootScope in your controller, you must first inject it. Once injected, you can save a user object to $rootScope like this:

$rootScope.user = {
    name: "abc",
    password: "asd"
}

To retrieve the user object from $rootScope, implement the following function in your controller:

$scope.getUserNameFromRootScope : function(){
  return $rootScope.user.name;
}

Now you can utilize this function within your selection element:

<section  ng-switch on="getUserFromRootScope()">
  <span ng-switch-when="abc">{{user.name}}</span>
  <span ng-switch-when="null">The name is empty</span>
  <span ng-switch-default>Hello</span>
</section>

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

Modify a CSS style with JavaScript or jQuery

Can CSS rules be overwritten using jQuery or JavaScript? Imagine a table with rows categorized by different classes - "names" for persons and "company" for companies. How can we efficiently hide or show specific rows based on these classes? If we have a ...

Create an Array of Objects by Sharing Your Post

Can someone guide me on the correct way to post my data here? I have been encountering errors while trying to insert data into user.SavedMachines.Id and user.SavedMachines.Date. I attempted using user.SavedMachines.Id = req.body.SavedMachinesId and user. ...

Having trouble loading environment variables in NextJS on Heroku?

I am currently utilizing NextJS and deploying my application on Heroku. When the page initially loads, I am able to retrieve data through getInitialProps without any issues. However, when trying to access this data in a regular function, I encounter an er ...

The checkbox event listener becomes dysfunctional when the innerHTML of its container is modified

My current challenge involves creating checkboxes with a blank line inserted after each one. I also need these checkboxes to trigger a function when changed. This is my code snippet: var div = document.getElementById("test"); var cb1 = document.createEl ...

Error encountered in jQuery Datatables: aData variable is not defined

I am having an issue with a jQuery datatable that is using an Ajax data source. This is how the table is set up: $("#tblNotes").DataTable({ "ajax" : { "url": "/projects/ajaxGetProjectNotes/", "type" : "post", ...

When utilizing the File System Access API, the createWritable() method functions perfectly within the console environment but encounters issues when executed

I've been diving into the File System Access API for an upcoming project and I'm struggling with using the createWritable() method. Specifically, I'm encountering issues with this line of code: const writable = await fileHandle.createWritab ...

Is there a way to customize Angular's number filter?

I'm trying to achieve a consistent number format with Angular's number filter, regardless of the localization selected. After inspecting the Angular source code on GitHub, I found the implementation of the filter to be like this: function number ...

ngTable select all data that has been filtered

I have encountered an issue with selecting only the rows from an ng-table that have been filtered. The current code filters the table rows successfully, but it also selects rows that are not displayed: Controller: let sampleData = [{id: 1, name: 'Jo ...

Ways to transfer a variable from a Node.js script to a JavaScript file on the client side

Seeking guidance on how to transfer the "myBlogs" variable from my Node.js file ("server.js") to a frontend JavaScript file ("blogs.js"). I intend to utilize this variable in the JS file to iterate through the array it contains, generating a template for e ...

Error in Typescript occurrence when combining multiple optional types

This code snippet illustrates a common error: interface Block { id: string; } interface TitleBlock extends Block { data: { text: "hi", icon: "hi-icon" } } interface SubtitleBlock extends Block { data: { text: &qu ...

Using service as a parameter in a controller function in AngularJS

I am working on an Angular application where I have split the controller, view, and services into separate files. These are the files I'm using: home.controller.js angular .module('loc8rApp') .controller('homeCtrl', homeC ...

Combining object IDs with identical values to create a new array in JavaScript

i have an array of objects that are a join between the transaction, product, and user tables. I want to merge IDs with the same value so that it can display two different sets of data in one object. Here's my data let test = [ { Transac ...

How to remove outer quotes from JSON data in Reactjs after using JSON.stringify

When using JSON.stringify on a Json data, I noticed that the resulting string includes double quotes at the beginning and end. For example: x = {fieldId: 536, value: {value: 341, display_value: "ABCD"}} After using JSON.stringify, the result looks like t ...

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

Issue with React: Children's state is altering the state of the parent component

Question : Why is it possible for a child component to change the state of its parent when each component has its own state? Below is the complete code for my app: import React, { Component } from 'react'; import { render } from 'react-do ...

What is the best way to populate a text field in AngularJS with multiple selected values?

Seeking assistance with a dynamic text field value that changes based on an AngularJS post request. I am looking to modify this value through multiple selected options. Here is the HTML code: <tr ng-repeat="opt in myData"> <td> & ...

What is the best way to pass the ng-repeat value to the controller in AngularJS

On my webpage, I am trying to utilize ng-repeat with an array like the one below: var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}]; I want to have a button that, when clicked, sends eit ...

Are there any situations in which subscribing to an RXJS Observable does not result in either a success or error response

I have a question rather than a problem to resolve. I am curious if there is a scenario where neither "Success" nor "Error" are triggered. When making a POST call to "/logout", the expected response is an HTTP status code of 200 with an empty body. impo ...

Determining the exact pixel height of a table row

Is there a way to use JavaScript to accurately determine the height of a table row in pixels? Specifically, I am looking for the measurement from the top of one green border to the top of the next green border. I have tried using jQuery's .height(), ...

Trouble accessing named view dashboard when dealing with child view

I have declared the state of my application as shown below. var app = angular.module('app', [ 'ngAnimate', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.jq', &a ...