[解決済み] ngModel フォーマッタとパーサ

質問

同じ質問を別の形で投稿したのですが、誰も答えてくれません。angular jsでFormattersとParserが何をするのか、明確なイメージを得られていません。

定義によると、フォーマッタとパーサはどちらも私には似ているように見えます。 私はこのangularjsに新しいので、多分私は間違っています。

フォーマッタの定義

モデルの値が変更されるたびに、パイプラインとして実行される関数の配列。 各関数は順番に呼び出され、次の関数に値を渡します。 コントロールとバリデーションで表示するために、値をフォーマット/変換するために使用されます。

パーサーの定義

コントロールが DOM から値を読み取るたびに、パイプラインとして実行される関数の配列です。 各関数は、順番に呼び出され、次の関数に値を渡します。 バリデーションと同様に、値をサニタイズ/変換するために使用されます。 検証のために、パーサーは $setValidity() を使用して有効性の状態を更新し、無効な値に対しては undefined を返す必要があります。

簡単な例で両方の機能を理解するのを助けてください。両方の簡単な図解があるとありがたいです。

どのように解決するのですか？

このトピックは、関連する質問で非常によくカバーされています。 どのようにAngularJSで双方向フィルタリングを行うには？

まとめると

• フォーマッタは、モデルの値がビューに表示される方法を変更します。
• パーサはビューの値がどのようにモデルに保存されるかを変更します。

の例を基にした、簡単な例です。 NgModelController api ドキュメント :

  //format text going to user (model to view)
  ngModel.$formatters.push(function(value) {
    return value.toUpperCase();
  });

  //format text from the user (view to model)
  ngModel.$parsers.push(function(value) {
    return value.toLowerCase();
  });

実際の動作を見ることができます。 http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

<input type="button" value="set to 'misko'" ng-click="data.name='misko'"/>
<input type="button" value="set to 'MISKO'" ng-click="data.name='MISKO'"/>
<input changecase ng-model="data.name" />

名前を入力するとき（viewからmodel）、modelは常に小文字であることがわかります。 しかし、ボタンをクリックしてプログラム的に名前を変更した場合（モデルからビュー）、入力フィールドは常に大文字になります。