Javascript 输入字段的样式字体（Angularjs）

这是plunker链接->

正如您在链接中看到的，它执行输入字段的验证。只允许输入数字，它会自动添加逗号

我的问题是->如果我在该字段中输入负数，如何自动更改该字段中输入值的颜色

i、 e正数应按原样显示。当用户输入负数时，数字将以红色文本输入

我有什么办法可以做到这一点吗

HTML-

关于下面讨论的样式覆盖问题，这里是一个问题

实际的HTML代码

<div class="Ip"><input type="text" ng-model="amount" format="number" /></div>

---

应用格式时，只需检查它是否为负数，并根据需要添加css类

ctrl.$parsers.unshift(function (viewValue) {
        var plainNumber = viewValue.replace(/[^\d|\-+]/g, '');
        elem.val($filter('number')(plainNumber/100,2));
        if (plainNumber < 0) {
           elem.addClass('negative');
        } else {
            elem.removeClass('negative');
        }
        return plainNumber;
    });

---

您可以向现有的

format

指令添加几个条件，但这并不酷：指令应该集中精力，并做自己的事情，比如格式化

相反，创建一个更简单的指令，只添加新的验证约束。让我们称之为

positive

指令：

.directive('positive', [function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            ctrl.$validators.positive = function(value) {
                return value && value >= 0;
            };
        }
    };
}]);

那么用法就是

<input type="text" ng-model="amount" format="number" positive />

---

Demo:

@dfsq-此输入类型位于div内。因此div的css将覆盖到我们在指令中提到的css。我怎么能不让它覆盖呢？这个输入类型在一个div中。所以div的css被覆盖到我们在指令中提到的css中。我怎么能不让它覆盖？你能发布你正在使用的css吗？CSS有一个专一性的概念，专一性最高的CSS将“获胜”。我需要查看您的css，看看是什么导致了覆盖问题。这样就可以了：.Ip-input.negative{color:#ff0000}我不是SASS方面的专家，但我认为在您的情况下可能是：$font:#fff//此字体将被覆盖。即使我排除了这种引导字体，它也会使指令中提到的类过载。inputCl{color:$font；}.Ip{input{@extend.inputCl；}input.negative{color:#ff0000；}}让我们来看看。

ctrl.$parsers.unshift(function (viewValue) {
        var plainNumber = viewValue.replace(/[^\d|\-+]/g, '');
        elem.val($filter('number')(plainNumber/100,2));
        if (plainNumber < 0) {
           elem.addClass('negative');
        } else {
            elem.removeClass('negative');
        }
        return plainNumber;
    });

$font:#fff; 
$fontNegative:#ff0000;   

.inputCl{
    color:$font;
}

.Ip{                     
    input{
          @extend .inputCl;                         
    }
    input.negative {
         color: $fontNegative;    
    }

}

.directive('positive', [function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            ctrl.$validators.positive = function(value) {
                return value && value >= 0;
            };
        }
    };
}]);

<input type="text" ng-model="amount" format="number" positive />

.ng-invalid-positive {
    color: red;
}