15

フィドルを見つけてください 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>

入力フィールドで小数点以下の桁数を 2 桁に制限するにはどうすればよいですか。例のよう{{val | number:2}}に機能しますが、それを使用してフィールドに添付された ng-model をフォーマットする方法がわかりません。データ/モデル自体をフォーマットすることもできましたが、余分な小数点を保持したい値がほとんどありませんが、小数点以下 2 桁のみを表示します。

ありがとう。

4

4 に答える 4

8

この機能を制御するディレクティブを作成できます。これは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();
            }
        });
    }

これは、入力を小数点以下 2 桁に制限することで機能しますが、入力を小数点以下 2 桁にフォーマットしません。とにかく、それは出発点です。他の例を調べて、これを希望どおりに処理するための独自のディレクティブを作成できると確信しています。Angular の重要な点は、すべての質問に答えられるフレームワークではなく、HTML5 が単独で提供するものよりも追加の機能を作成できるフレームワークであり、それを非常にシンプルにすることです。

于 2013-04-22T01:02:57.793 に答える
8

これは、JQuery やディレクティブなしで実行できます。step を使用した最初の試みは非常に近いものでした。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-08T14:27:50.407 に答える