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

这里是plunker链接 – > http://plnkr.co/edit/iFnjcq?p=preview

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

我的问题是 – >如果我在该字段中给出一个负数，我该如何自动更改该字段中输入的值的颜色。

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

有什么方法可以实现这些家伙？

HTML的

JS指令

 var app = angular.module('App',[]); app.controller('MainCtrl', function ($scope) { }); app.directive('format', ['$filter', function ($filter) { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) { if (!ctrl) return; ctrl.$formatters.unshift(function (a) { return $filter(attrs.format)(ctrl.$modelValue); }); ctrl.$parsers.unshift(function (viewValue) { var plainNumber = viewValue.replace(/[^\d|\-+]/g, ''); elem.val($filter('number')(plainNumber/100,2)); return plainNumber; }); } }; }]); 

关于下面讨论的样式覆盖问题，这是问题所在。

实际的HTML代码

CSS通过scss应用于类Ip。 这里是

 $font:#fff; //this font gets overwritten. even if i exclude this font of bootstrap is there which will overwite the class mentioned in directive. .inputCl{ color:$font; } .Ip{ input{ @extend .inputCl; } } 

Answer 1

应用格式时，只需检查它是否为负数，并根据需要添加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; }); 

http://plnkr.co/edit/GdneR70Rw6RtTbwMrfx4?p=preview

你的SASS

 $font:#fff; $fontNegative:#ff0000; .inputCl{ color:$font; } .Ip{ input{ @extend .inputCl; } input.negative { color: $fontNegative; } } 

Answer 2

你可以在你现有的format指令中添加几个条件，但这并不酷：指令应该集中，并做自己的单一事情，比如格式化。

相反，创建一个非常简单的指令来添加新的validation约束。 我们称之为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; }; } }; }]); 

那么用法就是

之后，您可以使用.ng-invalid-positive类来设置输入的有效/无效状态，该类将由Angular添加，以取决于当前输入：

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

演示： http ： //plnkr.co/edit/2RAlx0DoFH1HEmdT0XCv？p = preview