限制小數點後的位數在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模型）=「號」輸入字段

回答

相關問題