CODEWITHSUNDEEP
javascriptcssangularjs
Noble-Surfer
Noble-Surfer

Reputation: 3172

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

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?

Upvotes: 0

Views: 751

Answers (2)

Maher
Maher

Reputation: 2547

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>

Upvotes: 0

Edison D&#39;souza
Edison D&#39;souza

Reputation: 4640

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 :)

Upvotes: 2

Related Questions