Display the div if the ng-show directive in Angular shows an empty result

I am trying to display data using an Angular expression, but I also want to show a different message if the expression returns no data. However, my current approach is not working as expected. Can someone help me correct it?


    <span class="detail">
        {{details.info}}
    </span>

In cases where there is no data returned by the expression, I want to display another div. Here's the code snippet:


    <span ng-show="!details.info">
        <p class="no">No Data</p>
    </span>

Answer №1

<span class="specifics">
    <p ng-if="!details.plan" class="nothing">No Information</p>
    {{details.plan}}
</span>

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 it possible to refresh resources in Node.js without the need to restart the server?

Is there a middleware or library that allows access to files added after the server starts without requiring a restart? I currently use koa-static-folder, but it seems unable to handle this functionality. ...

What is the best way to handle responses in axios when dealing with APIs that stream data using Server-Sent Events (S

Environment: web browser, javascript. I am looking to utilize the post method to interact with a Server-Send Events (SSE) API such as: curl https://api.openai.com/v1/completions \ -H "Content-Type: application/json" \ -H ...

Pattern matching tool for identifying React components with an unlimited number of properties

Currently diving into MDX and experimenting with Regex to extract details on React components from Markdown files. The regex pattern I'm aiming for should: Detect all types of React components This includes identifying the opening tag <Component ...

Combine the text value from a textbox and the value from a checkbox into a single

I'm trying to solve a challenge regarding appending values from text fields (excluding empty ones) and checkboxes in a specific order to form a string. It should be in the format: name|T|F_name|F|F. Once I've created this string, I plan to send i ...

Encountering [object, Object] while attempting to display JSON object retrieved from req.body in the console

While attempting to insert a product's details into my API's PostgreSQL database using Postman, I encountered an issue where the values of the specs key were displayed as [object Object] instead of showing the complete data. As a result, even in ...

One simple method for implementing dependency injection across multiple controllers in one step

In my Ionic1 project, I have multiple controllers for different pages. Here are the injections for two of them: .controller('login', function($scope, $http, $location, $state,$rootScope , auth,$timeout) .controller('Home', function($sc ...

Having trouble with Bootstrap 5 Carousel not sliding to the next image? Learn how to fix this issue by upgrading from Bootstrap 4 to Bootstrap 5

Having downloaded both the compiled css and js and the source files of the bootstrap 5 library, I've experimented with both. While the css seems to load fine, I'm struggling to get this example to function. It's from a bootstrap 4 related po ...

Implementing two-dimensional orientation on particles in three.js

My first attempt at using three.js involves a basic particle animation with 4 different textures mapped onto them. Everything is working smoothly so far, except for one issue - I can't seem to rotate the particles randomly for different orientations ( ...

How can services be effectively chained together in AngularJS?

My task involves making a call to a Restful service endpoint in order to retrieve an Id. Once I have obtained this Id, the next step is to make a second call to another Restful service endpoint using an angularjs service. The first call returns a customer ...

The challenge of styling table borders with CSS

Can anyone help me with a problem I'm having while trying to create simple borders on a table? The border appears bold in the second row and last row, does anyone know why this is happening? https://i.sstatic.net/bCuhK.jpg Just a note: when I checke ...

Mastering Angular Protractor for End-to-End Testing

Currently working on an end-to-end test for my Angular application using Protractor. While I can mock httpBackend for unit tests, I prefer to make actual server calls and test against the JSON response. Despite researching on stackoverflow, I'm still ...

Customize URL paths with separate templates using ui-router

I'm currently utilizing angular-ui-router's nested states feature to manage my views. My objective is to set up two routes: /artists - this will display the main page for all artists /artists/:id - this route will showcase the individual artist ...

Leveraging JavaScript or jQuery to code for advanced enterprise-grade wifi networks

After successfully developing a wifi application that supports personal WPA or WPA2 networks with password validation, I am now looking to expand my skills and tackle enterprise level wifi networks. These networks require more complex validations such as u ...

Tips for moving directly to a section while maintaining a set distance from the top of the page

I'm currently implementing code for a smooth scroll to a section when clicking on a navigation menu item: // handling links with @href starting with '#' $(document).on('click', 'a[href^="#"]', function(e) { ...

Issues with the functionality of jQuery append and AngularJS ng-if not functioning

In my application using checkboxes, I control the visibility of charts with the ng-if directive and implement drag-and-drop functionality with angular-Dragula. The use of ng-if is essential for me as it allows me to manipulate visible div IDs and organize ...

Using Google Maps to generate a polyline from an array

I have an array filled with various coordinates and data entries. My goal is to create a polyline that connects all these coordinate points within the array. While I can successfully place markers and infowindows, I am encountering difficulty in generating ...

Getting bounding box data from a 3D entity in A-Frame: A simple guide

Currently I'm immersed in a new aframe venture that requires me to import 3D objects of various sizes into my scene. I'm thinking ahead and would like to adjust the object to a specific size (such as a fixed height) before integrating it into the ...

Successfully executing a JQuery ajax GET request results in receiving truncated data

Recently, I encountered an issue while retrieving a large amount of data from my server using a JQuery ajax GET request. The data returned was truncated unexpectedly (as shown in the image below). However, when I tried accessing the same URL directly throu ...

JavaScript Video Pop-Up Automation

Seeking a solution for a video to seamlessly and automatically appear, preferably in a lightbox format. The video should trigger as soon as the user lands on the page, play itself, and then close. Additionally, there should be an option to replay the vid ...

change visibility:hidden to visible in a css class using JavaScript

I've put together a list of Game of Thrones characters who might meet their demise (no spoilers included). However, I'm struggling with removing a CSS class as part of my task. Simply deleting the CSS is not the solution I am looking for. I' ...