Using the Inline If-Else in AngularJS

Question

Using the Inline If-Else in AngularJS

<div class="alcohol">
       <img src="~/img/Interaction/alcohol.png" title="Alcohol" />
       <span>{{product.interaction}}</span>
  </div>

If the value of

{{product.interaction}} is 'CAUTION'

, the color of the span should be changed to red. Does anyone have any ideas on how to implement this?

javascript angularjs

Answer 1

Answer №1

Implement the use of ng-style with a ternary operator to conditionally check for a specific string and apply a corresponding style. Take a look at the code snippet below:

<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : ''">
  {{product.interaction}}
</span>

(to set color to white in the else case)

You can simply expand the else clause like this:

<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : {color:'white'}">
  {{product.interaction}}
</span>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.product = {};
  $scope.product.interaction = "CAUTION";
  $scope.product.interaction2 = "ANYTHING"; // for demonstrating the `else` condition
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    <div class="alcohol">
      <span ng-style="product.interaction2=='CAUTION' ? {color:'red'} : {color:'white'}">
        {{product.interaction2}}
      </span>

      <span ng-style="product.interaction=='CAUTION' ? {color:'red'} : {color:'white'}">
        {{product.interaction}}
      </span>
    </div>

  </div>
</body>
</html>

Answer 2

Implement the use of ng-style with a ternary operator to conditionally check for a specific string and apply a corresponding style. Take a look at the code snippet below:

<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : ''">
  {{product.interaction}}
</span>

(to set color to white in the else case)

You can simply expand the else clause like this:

<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : {color:'white'}">
  {{product.interaction}}
</span>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.product = {};
  $scope.product.interaction = "CAUTION";
  $scope.product.interaction2 = "ANYTHING"; // for demonstrating the `else` condition
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    <div class="alcohol">
      <span ng-style="product.interaction2=='CAUTION' ? {color:'red'} : {color:'white'}">
        {{product.interaction2}}
      </span>

      <span ng-style="product.interaction=='CAUTION' ? {color:'red'} : {color:'white'}">
        {{product.interaction}}
      </span>
    </div>

  </div>
</body>
</html>

Using the Inline If-Else in AngularJS

Answer №1

Similar questions

What is the best way to create a dynamic pie chart in AngularJS using JSON data?

Using jQuery to arrange information from an API into a table

Event for terminating a Cordova application

Can you offer advice on creating jasmine tests for an Angular controller and service similar to this?

Avoiding data type conversion in JavaScript/TypeScript

Creating a canvas texture on tube geometry with three.js for optimal display on iPad devices

Obtaining Mouse Click X, Y, and Z Coordinates with Three.js

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Ways to extract metadata from a given URL

Issue encountered when trying to access the webpage through a puppeteer connection

Exploring ng-repeat with a nested array structure within a JSON data format

"Utilize an HTML input to query and retrieve data stored in a

Retrieve JSON data from Form Submission

The URL is being modified by the Angular $compile function

Retrieve data from the MySQL database based on the search input field and dynamically update the options in the

What is the best way to eliminate or substitute Unicode Characters in Node.js 16?

The NestJs project fails to display the updates when using the "tsc" command before running either "npm run start" or "npm run start:dev"

Stay dry - Invoke the class method if there is no instance available, otherwise execute the instance method

The functionality of making Slim POST requests is currently not functioning as expected within the Ionic

Is it a cookie-cutter function?