ng-modelの入力ボックスにAngularjsの通貨形式：各入力で$ formattersを起動する方法

Question

私はこれをどこでも検索しました。答えを持つすべてのスタックオーバーフローは、実際には機能しません。どのような例やグーグルグループの例でも、ドキュメントを含む角度のものと同じです。

シンプルなようです。ユーザーが押した各キーの入力に対して関数を呼び出すようにしたい。

NG-モデルと簡単な入力

<input class="form-control" ng-model="model.thisisnotfun" formatter type="text" required> 

私が読んで、すべてによります。 $ formattersは、モデルから$ formatters配列内の関数を呼び出すビューに値を更新する必要があります。入力ボックスに入力すると決して呼び出されません。

.directive('formatter', function ($filter, $parse) { 
    return { 
     require: 'ngModel', 

     link: function (scope, element, attrs, ngModel) { 

      ngModel.$formatters.push(
       function (value) { 
        console.log('this only gets called on page load'); 
       } 
      ); 
     } 
    }; 
}) 

私は既にこれを行うカスタム方法がたくさんあることは知っています。私は回避策は必要ありません。ちょうど$ formattersを使ってビューデータを "フォーマット"する方法を知りたいだけです。任意の助け

非常に、非常に単純なjsfiddle http://jsfiddle.net/fh7sB/4/

感謝。

Answer 1

モデルがユーザに提示される値をフォーマットするために更新されたときに呼び出されます。 $parsersは、逆のことを行い、すなわち、値をビューストリングから実モデルに変換する。数。

ここではじめてのフィドル：http://jsfiddle.net/9tuCz/ボタンを押してください。モデルを変更して$formattersを再度起動します。

Answer 2

関数から実際に有効な値を戻していることを確認してください。

パーザは、毎回同じ値を返すので、フォーマットされた出力は変更されていないとみなし、呼び出しをスキップすると想定されます。

Answer 3

$ formatters関数を私が望むように動作させることができませんでした。私はどこでも探していたものの一つの例を見つけることができなかったので、誰かがそれを必要とする場合に備えて私は自分の答えを投稿するつもりです。

これは私がAngularJSのマニュアルで、 `$ formatter`を参照してくださいいけないNG-モデル

.directive('uiCurrency', function ($filter, $parse) { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, element, attrs, ngModel) { 

      function parse(viewValue, noRender) { 
       if (!viewValue) 
        return viewValue; 

       // strips all non digits leaving periods. 
       var clean = viewValue.toString().replace(/[^0-9.]+/g, '').replace(/\.{2,}/, '.'); 

       // case for users entering multiple periods throughout the number 
       var dotSplit = clean.split('.'); 
       if (dotSplit.length > 2) { 
        clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2); 
       } else if (dotSplit.length == 2) { 
        clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2); 
       } 

       if (!noRender) 
        ngModel.$render(); 
       return clean; 
      } 

      ngModel.$parsers.unshift(parse); 

      ngModel.$render = function() { 
       console.log('viewValue', ngModel.$viewValue); 
       console.log('modelValue', ngModel.$modelValue); 
       var clean = parse(ngModel.$viewValue, true); 
       if (!clean) 
        return; 

       var currencyValue, 
        dotSplit = clean.split('.'); 

       // todo: refactor, this is ugly 
       if (clean[clean.length-1] === '.') { 
        currencyValue = '$' + $filter('number')(parseFloat(clean)) + '.'; 

       } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) { 
        currencyValue = '$' + $filter('number')(parseFloat(clean), 1); 
       } else if (clean.indexOf('.') != -1 && dotSplit[dotSplit.length - 1].length == 1) { 
        currencyValue = '$' + $filter('number')(parseFloat(clean), 2); 
       } else { 
        currencyValue = '$' + $filter('number')(parseFloat(clean)); 
       } 

       element.val(currencyValue); 
      }; 

     } 
    }; 
})