AngularJS/ CSS - change colour of text depending on its value

Question

I have recently started working on a project that uses AngularJS quite heavily. Having not used AngularJS previously, I am still getting familiar with it.

At the moment, I am working on a page that displays the value of a variable to the user, in text format. The value will constantly be changing & automatically updated on the page, and I want to change the colour of that text based on its value. i.e. while the value of the variable is less than 100, the numbers should be displayed in white, but as soon as the value reaches 100, & for any value greater than 100, the numbers should be displayed in red.

I have identified the JS file where this information is displayed on the webpage, and have added in what I expect to be the required if statement to make the text change colour as I expect. That code currently looks like this:

.directive('umwTagBox', function($timeout, fxTag, umColorFilter) {
    return {
        restrict: 'E',

        // Create an isolated new scope
        scope: {
            ...

            // Preset colour name
            color: '@',

            ...
        },

        // Tag box template
        template: '<div class="tag-box-title" data-i18n="{{heading || tag}}">' +
              '</div><div class="tag-box-icon">' +
              '<i class="glyphicon {{icon}}"></i></div>' +
              '<div class="tag-box-info"><div class="tag-box-value">' +
              '{{value}}<span class="tag-box-unit"> {{unit}}</span></div>' +
              '<div class="tag-box-desc" data-i18n="{{description}}">' +
              '</div></div>',

        link: function($scope, $element){
            // use a print to see when/ whether this function is called:
            console.log("link: function(...) called in directive.js, umwTagBox line 801 ");
            ...
            // Set to < or > 100 for testing purposes
            $scope.value = 153;

            //Add an 'if' to check whether the value of the tag is > 100, if it is, set colour to red
            console.log("'link' function running (directive.js line 918)");
            if ($scope.value >= 100) {
                console.log("$scope.value (v >= 100) = " + $scope.value);
                valueEle.color = "red";
                console.log("valueEle.color should be red: " + valueEle.color);
            } else {
                console.log("$scope.value (v < 100) = " + $scope.value);
                //$element.css("background-color", #F8F8FF); //white
    //            $element.style.color = "white";
                valueEle.color = "white";
                umColorFilter($scope.color = white);
                console.log("valueEle.color should be white: " + valueEle.color);
            }

I have hardcoded the variable ($scope.value) to a value > 100 for testing purposes. However, when I run the code, and the page loads in the web browser, I can see in the console, that the debug:

$scope.value (v >= 100) = 153

valueEle.color should be red: red

is displayed, but for some reason, the text is still displayed in white...

Anyone have any ideas why this is? What am I missing?

Edison D'souza · Accepted Answer · 2017-06-21 09:18:27Z

2

HTML:

<input type="number" ng-model="inputNumber"/>
<span class="white" ng-class={'red': validate()}> {{inputNumber}} </span>

Angular Code:

$scope.validate = function() {
  if($scope.inputNumber > 100) 
    return true;
  else return false;
}

Here $scope.inputNumber is the input which should be bound using ng-model.

CSS:

.white {
  color: white;
}

.red {
  color: red !important;
}

I hope this helps :)

answered Jun 21, 2017 at 9:18

Edison D'souza

4,6405 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Noble-Surfer Over a year ago

Thanks for your answer. I'm not sure I quite understand how I'd apply that to the code that is already there (I have just taken this project on, so the code-base is new to me). I probably should have mentioned that there is no 'input number' as such (at least, no user input value)... the number being displayed (the variable which can be any numeric value) is read from the hardware- the software is monitoring the state of the hardware, so I want to change the colour of the text whenever the value of this variable gets too high.

Edison D'souza Over a year ago

I understand your concern. you can simply consider inputNumber from the above example as the value that constantly keeps changing in your project and apply the change to that.

Noble-Surfer Over a year ago

I tried changing the lines where I'm setting the color value from valueEle.color = red; to valueEle.color: red;, as you appear to have suggested, but when I load my page in the browser, the console shows the error: Uncaught SyntaxError: Unexpected token :. However, if I leave it as I have it, when the page loads, the console shows the debug I would expect (valueEle.color should be red: red), but the text of that variable is actually still displayed in white...

Noble-Surfer Over a year ago

which is what I am using, as shown in my OP: if ($scope.value >= 100) {

Edison D'souza Over a year ago

I think you are using css syntax for javascript. Just to be specific, if you are using CSS, use above code. Else, use this in javascript document.getElementById('someElementId').style.color = "red";

|

Maher · Accepted Answer · 2017-06-21 09:30:16Z

0

You can use HTML attributes as max, min to better validation on your inputs, in this sample if your value is great than 100, inputNumber will undefined so class=red not applied.

<input type="number" max="100" ng-model="inputNumber"/>
<span class="white" ng-class="{'red': inputNumber}" ng-bind="inputNumber"></span>

answered Jun 21, 2017 at 9:30

Maher

2,5471 gold badge21 silver badges33 bronze badges

Collectives™ on Stack Overflow

AngularJS/ CSS - change colour of text depending on its value

2 Answers 2

14 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Related