Using an if-else statement in AngularJS

<ng-switch on="MyData.Status">
    <p ng-switch-when="2">
        <p ng-if="MyData.SomeProp == false">
            Message 1
        </p>
        <p ng-if="MyData.SomeProp == true">
            Message 2
        </p>
    </p>
</ng-switch>

To execute the block of code with MyData.SomeProp == false only when ng-switch-when="2", you can use the following pseudo code:

if (MyData.Status == 2){
   if (MyData.SomeProp == false){
      print message 1
   } 
   else{
      print message 2
   }
}

You can achieve this using AngularJS by implementing the above logic in your controller or directive.

Answer №1

Opt for using ng-show over ng-if:

<ng-switch on="MyData.Status">
    <p ng-switch-when="2">
        <p ng-show="MyData.SomeProp == false">
            Display Message 1
        </p>
        <p ng-show="MyData.SomeProp == true">
            Display Message 2
        </p>
    </p>
</ng-switch>

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

Compilation of Angular 6 project is failing due to error TS1005: Expected ',' instead of the symbol used

I keep encountering an error message whenever I try to compile my code. ERROR in src/app/form/form.component.ts(22,39): error TS1005: ',' expected. Below is the snippet of code where the error is pointing: import { Component, OnInit } from &ap ...

`Unresolved: AngularJS preselection quandary with dropdown menu`

I am encountering an issue with the select box that is pre-selected, where the database field value of selected subjects is saved in this particular format: ["12","3","37"] The PHP code reads the value from the database: $data['classSubject']=j ...

The jqGrid is not showing the AJAX JSON data as expected

Currently, I am exploring jqgrid and trying to figure out how to display data in another jqgrid when clicking on a specific colmodel. The retrieved data from the server goes through a function and reaches the grid, but no information is displayed without a ...

Leveraging AJAX for fetching files on the identical server

Just starting out with HTML and AJAX programming, so let's give it a shot: I've developed a website that populates a table with content from an external txt file (content.txt). The text file is hosted on a Windows 2003 webserver in the C:\I ...

Can you explain the concept of a "cURL" and guide me on how to use it effectively?

I'm currently working on setting up a Lyrebird application, but I only have a basic understanding of javascript and php. Despite my efforts to implement a cURL request from , I've encountered issues trying to get it to work in both javascript and ...

What is the correct way to utilize JavaScript's clearTimeout function with arguments?

I came up with a simple function to mimic the movement of window blinds. It runs on a server that receives requests with a direction parameter determining whether the blind should move UP, DOWN, or STOP. The simulation works like this: upon receiving a re ...

Harnessing the power of Angular JS, Jquery, and Metismenu simultaneously

Is it possible to successfully integrate Jquery, AngularJs, and metisMenu simultaneously? Initially, I added Jquery first, followed by AngularJs and then metisMenu. Unfortunately, metisMenu did not function properly. Subsequently, I rearranged the order, ...

AngularJS does not refresh the view

Currently encountering an issue with data display. Form submission and database update function correctly (backend is operational). However, upon returning to the homepage using a button on the page, The homepage view does not reflect updated values. It ...

Can someone explain how to replicate the jQuery .css function using native JavaScript?

When referencing an external CSS file, the code may look something like this: #externalClass { font-family: arial; } Within the HTML file, you would use it like so: <a href="#" id="externalClass">Link</a> In the JavaScript file, you can ret ...

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

What is the most effective method for pausing execution until a variable is assigned a value?

I need a more efficient method to check if a variable has been set in my Angular application so that I don't have to repeatedly check its status. Currently, I have a ProductService that loads all products into a variable when the user first visits the ...

Developing a Multi-Stage Pop-Up with Jquery

I am interested in creating a custom multi-step modal This particular div has dynamically generated classes $('.modal-content').append('<div class="modal-body step step-' + key + '" data-step="'+key+'"></div> ...

The Minimax algorithm experiencing issues in Next.js

I recently wrote some code in Next.js, but unfortunately, it's not functioning as expected. Despite my best efforts and attempts at utilizing alpha beta pruning, the code still fails to work properly. The issue lies in the fact that it simply returns ...

Modifying an object's label based on a particular value using JavaScript

In my current project involving React.js charts, I am looking to organize data by month. In Django, I have set up a view to display JSON containing the total events per month in the following format: [ { "month": "2022-06-01T00:00:0 ...

Issue with vue-apollo package causing GraphQL query not to display on the frontend

Currently, I am expanding my knowledge of GraphQL and working on a project where I aim to display queries in the front end. To achieve this, I have incorporated the package GitHub - Akryum/vue-apollo: ...

Ways to update a component when the value of a Promise is altered

I am struggling with Vue component re-rendering due to a problem related to consuming data from a Promise. The data is fetched and stored under the specific property chain (visualData.layout.cube...), where I assign values to DATA properties (such as label ...

Excellent Methods for Implementing a Double Click Functionality in JavaScript for Mouse

Is there a way to make the mouse double click by itself using JavaScript? I need this functionality for a Selenium project that requires testing, but unfortunately Selenium does not provide an option for double clicking. Can anyone suggest how I can achiev ...

How can I verify if an SVG file has a reliable source? (having troubles converting SVG to canvas)

While attempting to use an SVG generated by a chart plugin (https://wordpress.org/plugins/visualizer/), I am facing issues retrieving the source of the SVG-image being created. Interestingly, when using other SVGs with the same code, everything works perfe ...

Warning: Unhandled promise rejection occurred while running the test

Currently delving into the world of selenium with a focus on testing the registration page. I've crafted a registration page class equipped with methods for monitoring registrations. However, upon attempting to execute a test within the application cl ...

Ways to navigate to a different page in React when a user clicks?

When working on my react app, I encountered an issue where the useHistory hook was undefined. How can I troubleshoot this problem and ensure that useHistory is properly defined? App.js import 'bootstrap/dist/css/bootstrap.css' import React f ...