限制小数点后的位数在HTML5型（Angularjs模型）=“号”输入字段

请找到小提琴 http://jsfiddle.net/q2SgJ/5/限制小数点后的位数在HTML5型（Angularjs模型）=“号”输入字段

<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>

我怎样才能限制输入字段中的小数位数为2位。如{{val | number:2}}示例中的工作，但不确定如何使用它来格式化附加到字段的ng模型。我可以格式化数据/模型本身，但我有一些值我想保留额外的小数，但只显示2个十进制数。

谢谢。

来源

2013-04-21 bsr

您可以编写指令来控制此功能。它不是以角度出货的，但指令可以控制页面上的外观和工作方式。

我写了一个简单的一个：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单独提供的更多功能，并使其非常简单。

来源

2013-04-22 01:02:57

蒂姆，感谢确认它不是本地可能与html5，也是Angular必要的方法。 – bsr 2013-04-22 11:31:41

这个指令会阻止你在达到2dp后输入任何值，即。您将无法更改小数点左边的数字 – 2014-12-18 09:56:29

^同意。它假定用户只输入一个数字（用户输入始终是最右边的），因此不处理在其他任何位置编辑的数字。 – Overflew 2015-08-05 23:28:34

我在接受的答案上进行了扩展，在确定要限制的小数位数时查看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-07 15:08:37 dkellycollins

您可以在没有JQuery的情况下做到这一点，也没有指令。你最初的尝试是非常接近的。我发现this site显示如何使用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>

来源

2015-10-08 14:27:50 JabberwockyDecompiler

限制小数点后的位数在HTML5型（Angularjs模型）=“号”输入字段

回答

相关问题