Стиль шрифта для поля ввода (Angularjs)

Question

вот plunker ссылка->http://plnkr.co/edit/iFnjcq?p=preview

Как вы можете видеть в ссылке, он выполняет проверку поля ввода. разрешается вводить только числа, и автоматически добавляет запятые.

Мой вопрос -> если я даю отрицательное число в этом поле, как я могу автоматически изменить цвет значения, введенного в этом поле.

i.e Положительное число должно отображаться как есть. когда пользователь вводит отрицательный, цифры вводятся красным цветом текста.

Есть ли способ, которым я могу достичь этого?

HTML-

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

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 код

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

CSS-прикладывается через СКС для класса 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, b ut это не круто: директива должна быть сфокусирована и делает свою собственную единственную вещь, такую ​​как форматирование.

Вместо этого создайте еще одну очень простую директиву, чтобы просто добавить новое ограничение проверки. Давайте назовем это 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 /> 

После этого вы можете стиль действительное/недействительное состояние входа, используя .ng-invalid-positive класс, который будет добавлен угловым для ваших зависимости от текущий входной:

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

Демонстрация:http://plnkr.co/edit/2RAlx0DoFH1HEmdT0XCv?p=preview