javascript - 限制 html5 类型 ="number"输入字段中的小数位数(使用 Angularjs 模型)

Question

请找到 fiddle 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。我本可以格式化数据/模型本身，但我想保留额外的小数点的值很少，但只显示小数点后两位。

谢谢。

Answer 1

您可以编写指令来控制此功能。它不是 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();
            }
        });
    }

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