角度jsの数値テキストボックスの書式設定方法は？

Question

<div class="input-group-icon">Max <span class="error"> 
    <div class="input-group"> 
    <input style="border-right:none;" name="investment_amount_max" ng-model="attributes.investment_amount_max" max="{{constants.globalValue.maxNumber}}" min="{{attributes.investment_amount_min}}" type="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required class="form-control input-sm m-bot15" /> 
    <span style="border-left:none; background:none; border-color:#e2e2e4;" class="input-group-addon" id="basic-addon2">{{programname.country.currency_symbol?programname.country.currency_symbol:'$sss'}}</span> </div> 
    <span id='number-default'>{{attributes.investment_amount_max | number}}</span> 
    <label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.required" class="error">{{formValidation.required}}</label> 
    <label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.min" class="error"> {{formValidation.minMax}} </label> 
    <label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.max" class="error"> {{formValidation.numberMax}} </label> 
    <label for="investment_amount_min" ng-show="submittab1 && attributesForm.investment_amount_max.$error.number" class="error">{{formValidation.errorNumber}}</label> 

    </div> 
</div> 

上記のコーディングを参照してください。角度jsを使用してテキストボックス番号の番号をフォーマットする方法はありますか？

Answer 1

input type="number"は数字以外はサポートしていません。

$filter('number')(number, fractionSize)を使用して、自動的に値を書式設定するときにユーザーが入力できる内容を制限するために、pattern = "[0-9] +（[。、] [0-9] +）入力がフォーカスされていない間、コントローラに

は、あなたも、データを表示するようにフォーマットされたラベルを設定できます。AngularJS number input formatted view

Answer 2

あなたは、出力をフォーマットするカスタムフィルタを使用することができますし、： http://jsfiddle.net/LCZfd/6/

はたぶん、あなたはこの質問をお読みくださいformaへのカスタムディレクティブテキストフィールドを更新しています。

ng-valueまたはvalueディレクティブでカスタムフィルタ "emptyIfZero"を確認してください。これは表示専用で、出力を計算するために使用される他の入力フィールドがある場合に機能します。テキストボックスを更新するときに書式設定する場合は、$parsersと$formattersを使用する必要があります。詳細については、この記事を参照してください。

https://cameronspear.com/blog/how-cool-are-formatters-and-parsers/

$parsersでカスタムディレクティブを使用して、できるだけ早くあなたが値をテキストボックスに表示されている方法を変更するようngModelを更新するために$renderを呼び出すようにしてください。 Plunkerサンプルのempty-if-zeroを参照してください。

更新Plunkerサンプル：

http://plnkr.co/edit/Fmqw0wp37Ndk1yuWvFkV?p=preview（source）