Changing color based on AngularJS condition using CSS

Question

Changing color based on AngularJS condition using CSS

My HTML code looks like this:

 <div>
      <i class="glyphicon glyphicon-envelope" 
         style="margin-top: -50px; cursor:pointer; color: #1F45FC" 
         ng-click="createComment(set_id)">
      </i> Route 
      <center>
           <span class="route_no">{{set_id}}</span> 
      </center>
 </div>

 <div>
      <center>Status: {{set.total_one}}/{{set.total_two}}</center>
 </div>

This content is part of an ng-repeat="set in settings"

I am trying to dynamically change the color of my

<i class="glyphicon glyphicon-envelope">

based on a condition set in the JavaScript controller.

I am encountering difficulties in linking each icon with an index so that AngularJS can target specific icons for color changes.

javascript html css angularjs

Answer 1

Answer №1

Instead of correcting the classes, you have the option to utilize ng-style to apply a class when the condition is met.

If your condition relies on a boolean property like flag within your set, and if you wish to include a class named red when it's true, you can achieve this by:

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="{ red: set.flag }">

An alternative approach is to use an expression that generates the class name, where the ternary operator can be very helpful. For instance, if you want the first 3 items to be styled in red and the rest in blue:

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="$index < 3 ? 'red' : 'blue'">

Answer 2

Instead of correcting the classes, you have the option to utilize ng-style to apply a class when the condition is met.

If your condition relies on a boolean property like flag within your set, and if you wish to include a class named red when it's true, you can achieve this by:

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="{ red: set.flag }">

An alternative approach is to use an expression that generates the class name, where the ternary operator can be very helpful. For instance, if you want the first 3 items to be styled in red and the rest in blue:

<i class="glyphicon glyphicon-envelope"
   ng-click="createComment(set_id)"
   ng-style="$index < 3 ? 'red' : 'blue'">

Answer 3

Answer №2

If you need to determine a color based on certain conditions, you can create a function within your controller to handle this task effectively. Check out the solution provided in this JSFiddle example.

Below is the function that contains the necessary logic for determining the color:

this.pickColor = function (customer) 
{ 
    if (customer.total_one > 400) return 'red';
    if (customer.total_one > 300) return '#FF4700';
    if (customer.total_one > 200) return '#FF9900';
    if (customer.total_one > 100) return 'yellow';
};

Answer 4

If you need to determine a color based on certain conditions, you can create a function within your controller to handle this task effectively. Check out the solution provided in this JSFiddle example.

Below is the function that contains the necessary logic for determining the color:

this.pickColor = function (customer) 
{ 
    if (customer.total_one > 400) return 'red';
    if (customer.total_one > 300) return '#FF4700';
    if (customer.total_one > 200) return '#FF9900';
    if (customer.total_one > 100) return 'yellow';
};

Changing color based on AngularJS condition using CSS

Answer №1

Answer №2

Similar questions

What is the best way to experiment with angular-ui-tinymce within a tabset using Plunker?

I added an onClick event to an SVG image, however, I am struggling to get the event to execute a jQuery if/else statement

The height of the division is either inadequate or excessive when set at 100%

ES6 does not support two-way binding functionality

Encountering a 404 error with Next.js 13 dynamic routing

Retrieving variables from JavaScript files in TypeScript

Sending unstyled HTML content using JavaMail

POST method is not permitted on Expressjs 405

Detecting a mobile device when using NextJS can be accomplished by using user

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

Retrieving the value from a concealed checkbox

Storing a Promise in a Variable in React

How come I'm not receiving an error message when I enter an incorrect email or password?

Having trouble with my JavaScript code in Visual Studio because of a bundler issue. It's throwing an Uncaught ReferenceError for trying to access a variable before initialization

Margin discrepancies when using em units

Error in Fullcalendar Angular/Node.JS http request: Circular structure detected during JSON conversion (at Object.stringify)

The function req.send('null') does not exist in the Node.js MySQL library

Is it possible to make an image gradually appear and disappear?

Is there a way to update an angular.js service object without using extend or copy?

Organizing items in rows with alternating quantities using CSS within a fluid design