javascript - AngularJS/CSS - 根据文本的值改变文本的颜色

Question

我最近开始从事一个大量使用 AngularJS 的元素。以前没有使用过 AngularJS，我仍然熟悉它。

目前，我正在开发一个以文本格式向用户显示变量值的页面。该值将不断变化并在页面上自动更新，我想根据其值更改该文本的颜色。即，当变量的值小于 100 时，数字应显示为白色，但一旦值达到 100，对于任何大于 100 的值，数字应显示为红色。

我已经确定了在网页上显示此信息的 JS 文件，并添加了我希望成为必需的 if 语句以使文本按我的预期改变颜色。该代码目前看起来像这样:

.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);
            }

出于测试目的，我已将变量 ($scope.value) 硬编码为大于 100 的值。但是，当我运行代码并在 Web 浏览器中加载页面时，我可以在控制台中看到调试:

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

valueEle.color should be red: red

显示出来了，但是不知为什么，文字还是显示为白色...

有人知道这是为什么吗？我错过了什么？

Answer 1

HTML:

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

Angular 代码:

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

这里 $scope.inputNumber 是应该使用 ng-model 绑定(bind)的输入。

CSS:

.white {
  color: white;
}

.red {
  color: red !important;
}

希望对您有所帮助:)