Verify the ng-if condition for a specific value and display an alternative option if the condition is not

Question

Verify the ng-if condition for a specific value and display an alternative option if the condition is not

When obtaining a response from the server in JSON format (containing color.mix and color.pure), it is passed directly to the template. In this template, I need to display a value if it exists or show another value if it does not.

<span ng-if="color.mix">{{color.mix}}</span>

If the value is not present, I want to display the 'pure' value. Initially, I attempted the following:

<span ng-if="!color.mix">{{color.pure}}</span>
<span ng-if="color.mix">{{color.mix}}</span>

However, when both values are received, both are displayed simultaneously.

What would be the correct approach to achieve this?

(Using Angular 1.6)

javascript angularjs

Answer 1

Answer №1

<span>{{color.combined ? color.combined : color.pure}}</span>

Answer 2

<span>{{color.combined ? color.combined : color.pure}}</span>

Answer 3

Answer №2

Ensure that both conditions are checked

<span ng-if="!color.mix && color.pure">{{color.pure}}</span>
<span ng-if="color.mix && !color.pure">{{color.mix}}</span>

If you prefer a one-liner using a ternary operator, you can simply write,

<span>{{color.mix ? color.mix : color.pure}}</span>

DEMO

var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
  function($scope) {
    $scope.color = {
      pure: "test"
    };
  }
]) ;

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<span>{{color.mix ? color.mix : color.pure}}</span>
</body>
</html>

Answer 4

Ensure that both conditions are checked

<span ng-if="!color.mix && color.pure">{{color.pure}}</span>
<span ng-if="color.mix && !color.pure">{{color.mix}}</span>

If you prefer a one-liner using a ternary operator, you can simply write,

<span>{{color.mix ? color.mix : color.pure}}</span>

DEMO

var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
  function($scope) {
    $scope.color = {
      pure: "test"
    };
  }
]) ;

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<span>{{color.mix ? color.mix : color.pure}}</span>
</body>
</html>

Verify the ng-if condition for a specific value and display an alternative option if the condition is not

Answer №1

Answer №2

Similar questions

Error: Oops! The super expression can't be anything other than null or a function in JavaScript/TypeScript

AngularJS: Starting a $scope property in the right way

Selecting an option from the dropdown menu to automatically fill in a textbox within

Retrieve the id of the anchor tag that was selected upon clicking, and then dynamically change the content of another div

"Utilizing ng class with an array of objects: A step-by-step guide

What is the best way to create a drop-down menu that exports data directly to an Excel spreadsheet?

How can I trigger a series of functions in sequence when a button is clicked using Vue.js?

Calculating the sum() of a specific attribute in Loopback without the need to iterate through every instance of the object

Storing a JSON response in a variable

Roundabout Navigation Styles with CSS and jQuery

Having trouble retrieving mobiscroll instance in Angular with Ionic

How can I differentiate between server-side and client-side JavaScript in Node/Express?

The FetchStrategy.FromLocalCache in BreezeJS isn't working as expected and not returning

Using Regular Expressions in an ExpressJS Router

React - Dealing with rendering issue when toggling a button using LocalStorage and State

Challenges encountered when redirecting users with a combination of javascript and php

Steps for rearranging the order of CSS grid layout

Implementation of the I18next library

Is the neglected property being discarded?

Angular Promises - Going from the triumph to the disappointment callback?