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

Question

请找小提琴 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模型.我可以格式化数据/模型本身,但我有几个值,我喜欢保留额外的小数,但只显示2十进制.

谢谢.

Answer 1

您可以编写指令来控制此功能.它不是带有角度的东西,但是指令可以控制事物在页面上的外观和工作方式.

我写了一个简单的: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位小数,但不会将输入格式化为两位小数.无论如何,这是一个起点.我相信你可以查找其他示例并编写自己的指令来按照你想要的方式处理它.关于Angular的事情是,它不是一个能够回答每个问题的框架,而是一个框架,它允许您创建比HTML5单独提供的更多功能,并使其变得非常简单.

Answer 2

您可以在没有JQuery的情况下执行此操作,也无需使用指令.你步骤的原始尝试非常接近.我发现这个网站显示了如何使用HTML5输入来限制使用步骤和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>