は（Angularjsモデルと）HTML5のタイプ=「数」入力フィールド

Question

に小数点以下の桁数を制限し、私は、入力フィールドに2桁に小数点以下を制限することができますどのようにフィドル 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> 

を見つけてください。例のように{{val | number:2}}は動作しますが、フィールドに接続されたng-modelをフォーマットするための使い方が不明です。私はデータ/モデル自体をフォーマットすることができましたが、私は余分な小数点を保持するのが好きですが、小数点以下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桁まで入力を制限で動作しますが、入力をフォーマットしません。小数点以下2桁までとにかく、それは出発点です。他の例を見て、あなたが望むようにこれを処理する独自の指示文を書くことができると確信しています。 Angularについての話は、すべての質問に答えがあるフレームワークではなく、HTML5だけで提供される機能よりも追加の機能を作成できるフレームワークであり、非常に簡単なことです。

Answer 2

制限する小数点以下の桁数を決定する際に、ステップ属性を調べるために受け入れられた答えを拡張しました。

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(); 
        } 
       } 
      }); 
     } 
    }; 
}); 

Answer 3

これは、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>