对于输入字段样式的字体（Angularjs） [英] Style font for input field (Angularjs)

问题描述

这里是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;    
    }

}

这篇关于对于输入字段样式的字体（Angularjs）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！