这里是plunker链路> http://plnkr.co/edit/ iFnjcq？p = preVIEW

你可以在链接看到，它执行输入字段的验证。只有数字被允许进入，它会自动添加逗号。

我的问题是 - >如果我给在该领域负数，我怎么能更改自动在该字段中输入的值的颜色。

即正数应显示为是。当用户进入负，得到的数字用红色的文字输入。

有什么办法，我可以做到这一点的家伙？

HTML -

 ＆LT; D​​IV NG控制器=MainCtrl＆GT;  ＆LT;输入类型=文本NG模型=量格式=号/＆GT;＆LT; / DIV＆GT; 

JS指令

  VAR应用= angular.module（'应用'，[]）;app.controller（'MainCtrl'，函数（$范围）{}）;app.directive（'形式'，['$过滤'，函数（$过滤器）{返回{    要求：'ngModel'，    链接：功能（范围，ELEM，ATTRS，CTRL）{        如果（CTRL！）回报;        Ctrl键。$ formatters.unshift（函数（）{            返回$过滤器（attrs.format）（CTRL $ modelValue）;        }）;        Ctrl键。$ parsers.unshift（功能（viewValue）{            变种plainNumber = viewValue.replace（/ [^ \\ D | \\  -  +] /克，''）;            elem.val（$过滤器（数字）（plainNumber / 100,2））;            返回plainNumber;        }）;    }};}]）; 

对于下面讨论的风格覆盖的问题，这里的问题。

实际的HTML code

 ＆LT; D​​IV CLASS =IP＆GT;＆LT;输入类型=文本NG模型=量格式=号/＆GT;＆LT; / DIV＆GT; 

在CSS通过SCSS为叶类应用。这

  $字体：#FFF; //这个字体被覆盖。即使我排除引导的这种字体是有这将overwite指令中提到的类。.inputCl {        颜色：$字体;}.IP {    输入{          @extend .inputCl;}} 

解决方案

在应用格式只是检查，看它是否负，根据需要添加CSS类

 控制$ parsers.unshift（功能（viewValue）{        变种plainNumber = viewValue.replace（/ [^ \\ D | \\  -  +] /克，''）;        elem.val（$过滤器（数字）（plainNumber / 100,2））;        如果（plainNumber℃，）{           elem.addClass（'负'）;        }其他{            elem.removeClass（'负'）;        }        返回plainNumber;    }）; 

http://plnkr.co/edit/GdneR70Rw6RtTbwMrfx4?p=$p$ PVIEW

您SASS

  $字体：#FFF;$ fontNegative：＃FF0000;.inputCl {    颜色：$字体;}.IP {    输入{          @extend .inputCl;    }    input.negative {         颜色：$ fontNegative;    }} 

here is the plunker link-> http://plnkr.co/edit/iFnjcq?p=preview

As you can see in the link, it performs validation of input field. only numbers are allowed to enter and it adds commas automatically.

My question is-> if i give a negative number in that field, how can i change the color of the value entered in that field automatically.

i.e A positive number should display as it is. when user enters negative, numbers get entered with red color of the text.

Is there any way i can achieve this guys ??

HTML-

<div ng-controller="MainCtrl">
  <input type="text" ng-model="amount" format="number" />
</div>

JS directive

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

Regarding the style overwrite issue discussed below, here is the problem.

The actual HTML Code

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

The CSS is applied through scss for the class Ip. Here it is

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

}

When you apply the formatting just check to see if it negative and add a css class as necessary

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

Your SASS

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

.inputCl{
    color:$font;
}

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

}