Help us understand the problem. What is going on with this article?

ngModelのFormattersとParsersの使い方

More than 5 years have passed since last update.

inputの入力と出力に変換を挟ませるやり方

/**
 * inputの値をcurrencyCodeを元にフォーマットする
 *
 * usage:
 *  <input type="text" amount-format="currencyCode">
 */
context.app.directive("amountFormat", function ($parse:ng.IParseService) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope:ng.IScope, element:ng.IAugmentedJQuery, attrs:ng.IAttributes, ngModel:ng.INgModelController) {
            var currencyCode = $parse(attrs["amountFormat"])(scope);
            var currencyInfo =  Currency.getInformationByCode(currencyCode);
            var offset = currencyInfo.map((x)=>x.offset).getOrElse(1);

            // model から view へ
            ngModel.$formatters.push(function toView(amount) {
                if(_.isUndefined(amount)) {
                    return NaN;
                }

                return parseFloat((amount / offset).toFixed((offset == 100) ? 2 : 0));
            });

            // view から model へ
            ngModel.$parsers.push(function(amount) {
                return (amount * offset).toFixed(0);
            });
        }
    };
});

k-iida
インフラ、サーバーサイド、フロントエンドとWebサービス開発を一通り経験しました。 現職はVPoE兼SREとして、エンジニア採用やチームビルディング、サイト運用および信頼性向上対策をしています。 最近はFaaSやHRに興味があります。
monopos
小売運営のすべてをオールインワンパッケージにした「Monopos(モノポス)」を開発・運営するテックベンチャー
https://monopos.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away