15

请找到小提琴 http://jsfiddle.net/q2SgJ/5/

<div ng-app="">
  <div ng-controller="Ctrl">

      WANTS:  {{val | number:2}} in "input" elelent<br>
    2 decimal in input:  <input  ng-model='val'> <br>
    2 decimal in input:  <input  type="number" step="0.01" ng-model='val'><br>
    2 decimal in input:  <input  ng-model='val' value="{{val |number:2}}"> <br>

  </div>
</div>

如何在 INPUT 字段中将小数位限制为 2 位。与示例中的一样{{val | number:2}}，但不确定如何使用它来格式化附加到字段的 ng-model。我本可以格式化数据/模型本身，但我有几个值我想保留额外的小数，但只显示 2 个小数。

谢谢。

4

4 回答 4

8

您可以编写指令来控制此功能。它不是 angular 附带的东西，但指令可以控制页面上的外观和工作方式。

我写了一个简单的：http: //jsfiddle.net/q2SgJ/8/

这是可以解决问题的链接函数：

   link:function(scope,ele,attrs){
        ele.bind('keypress',function(e){
            var newVal=$(this).val()+(e.charCode!==0?String.fromCharCode(e.charCode):'');
            if($(this).val().search(/(.*)\.[0-9][0-9]/)===0 && newVal.length>$(this).val().length){
                e.preventDefault();
            }
        });
    }

这适用于将输入限制为 2 位小数，但不会将输入格式化为 2 位小数。无论如何，这是一个起点。我相信您可以查找其他示例并编写自己的指令来按照您想要的方式处理它。关于 Angular 的问题在于，它不是一个对所有问题都有答案的框架，而是一个允许您创建比 HTML5 单独提供的功能更多的功能并使其非常简单的框架。

于 2013-04-22T01:02:57.793 回答
8

您可以在没有 JQuery 和指令的情况下执行此操作。您最初的 step 尝试非常接近。我发现这个网站展示了如何使用 HTML5 输入来限制使用 step 和 AngularJS 正则表达式输入过滤器。

<div ng-app="app">
    <div ng-controller="Ctrl"> @*Just an empty controller in this example*@
        <form name="myForm">
            <input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" /><br />
            Is a valid decimal?<span ng-show="!myForm.myDecimal.$valid">{{myForm.myDecimal.$valid}}</span>
        </form>
    </div>
</div>
于 2015-10-08T14:27:50.407 回答
4

在确定要限制的小数位数时，我扩展了已接受的答案以查看 step 属性。

directive('forcePrecision', function () {
    return {
        restrict: 'A',
        scope: {
           step: '@'
        },
        link: function (scope, element, attrs) {
            if (!scope.step || scope.step == 'any') {
               return;
            }

            var prec = 1;
            for (var i = scope.step; i != 1; i *= 10) {
                prec *= 10;
            }

            element.on('keypress', function (e) {
                var val = Number(element.val() + (e.charCode !== 0  ? String.fromCharCode(e.charCode) : ''));

                if (val) {
                    var newVal = Math.floor(val * prec) / prec;

                    if (val != newVal) {
                        e.preventDefault();
                    }
                }
            });
        }
    };
});
于 2014-08-07T15:08:37.317 回答
0

我已经扩展了蒂姆的小提琴，以防有人正在寻找可行的解决方案

http://jsfiddle.net/q2SgJ/653/

修改了按键事件以根据光标位置检索原始键入的值

ele.bind('keypress',function(e){
        var value = $(this).val();
                    var decimalPointPosition = value.indexOf(".");
                    if(!((e.charCode === 46) || (e.charCode > 47 && e.charCode <= 57)))
                        e.preventDefault();

                    else if (decimalPointPosition >= 0) {
                        var decimalCount = value.substring(decimalPointPosition + 1).length;
                        if ((decimalCount == 2 && $(this).prop("selectionStart") > decimalPointPosition)) {
                            e.preventDefault();                     
            }
           }       

        }
于 2018-04-12T20:48:12.397 回答