Question

我最近开始研究一个使用AngularJS的项目。之前没有使用过AngularJS，我仍然熟悉它。

目前，我正在开发一个页面，以文本格式向用户显示变量的值。价值将不断变化＆amp;在页面上自动更新，我想根据其值更改该文本的颜色。即，当变量的值小于100时，数字应显示为白色，但一旦值达到100，＆amp;对于任何大于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）硬编码为值＆gt; 100用于测试目的。但是，当我运行代码，并在Web浏览器中加载页面时，我可以在控制台中看到调试：

$ scope.value（v＆gt; = 100）= 153

valueEle.color应为红色：红色

显示

，但由于某种原因，文本仍显示为白色...

任何人都有任何想法，为什么会这样？我错过了什么？

Answer 1

<强> 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;
}

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

<强> CSS：

.white {
  color: white;
}

.red {
  color: red !important;
}

我希望这会有所帮助：）

Answer 2

如果您的值大于HTML，max，您可以将min属性用作100，inputNumber来更好地验证您的输入，在此示例中} undefined class=red {}未被应用。

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

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

2 个答案: