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

Style font for input field (Angularjs)

本文关键字：Angularjs 字体 样式 字段 输入      更新时间：2023-09-26

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

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

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

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

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

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的scs应用的。这是

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

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

您可以在现有的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 />

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

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

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

相关文章：