14

このソリューションを見ましたhttp://jsfiddle.net/gronky/GnTDJ/動作します。つまり、25 を入力すると、0.25 としてモデルに戻されます。

HTML:

<script type="text/javascript" ng:autobind
        src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>
<script>
function Main() {
    this.var = '1.0000';
}
</script>
<div ng:controller="Main">
    <input type="text" name="var" ng:format="percent">
    <pre>var = {{var|json}}</pre>
</div>​

JavaScript:

angular.formatter('percent', {
  parse: function(value) {
    var m = value.match(/^(\d+)\/(\d+)/);
    if (m != null)
      return angular.filter.number(parseInt(m[1])/parseInt(m[2]), 2);
    return angular.filter.number(parseFloat(value)/100, 2);
  },
  format: function(value) {
    return angular.filter.number(parseFloat(value)*100, 0);
  },
});
​

最新の AngularJS で動作するようにしてみましたが、もう動作しませんhttp://jsfiddle.net/TrJcB/つまり、25 を入力すると 25 としてプッシュ バックされ、正しい 0.25 がプッシュされません。モデルへの価値。

それとも、パーセント用の組み込みフォーマッターが既にあるのでしょうか? 通貨フォーマッター、またはカンマ区切りの数値も必要でした。

4

4 に答える 4

24

かなりの数の API が変更されているため、フィドルは現在の Angular バージョンでは機能しません。angular.formatterはもう利用できませんangular.filter。

これを記述する方法は、ディレクティブを使用し、ディレクティブ コントローラー$parserで利用可能にすることです。$formatterしたがって、リンク関数は次のようになります

link: function(scope, ele, attr, ctrl){
        ctrl.$parsers.unshift(
            function(viewValue){
                return $filter('number')(parseFloat(viewValue)/100, 2);
            }
        );
        ctrl.$formatters.unshift(
            function(modelValue){
                return $filter('number')(parseFloat(modelValue)*100, 2);
            }
        );
      }

また、フィルターは$filterサービスを介してアクセスできるようになりました。ここでドキュメントを見つけることができます: https://docs.angularjs.org/api/ng/filter/number

元の例のフィドルを更新: http://jsfiddle.net/abhaga/DdeCZ/18/

通貨フィルターは既に angular で利用可能です: https://docs.angularjs.org/api/ng/filter/currency

于 2012-12-02T16:51:31.917 に答える
2

入力の Angular 検証を解析、フォーマット、および実行する完全なディレクティブを次に示します。(Angular 1.2 & 1.3 に対してテスト済み)

これを使用して、サーバーとの間のデータ モデルを 10 進数表記 (0.7634) で表現できるようにしますが、人間が読める形式 (76.34) をユーザーに提供し、最大精度を適用します。このディレクティブは純粋に数値的な側面に関係していることに注意してください。ここに「%」を含めるよりも、個別にテンプレートに「%」を挿入する方が簡単だと思います。

デフォルトでは -100 から 100 までの入力値を適用しますが、attrspct-minとpct-max.

'use strict';

angular.module('XLDirectives')
  .directive('xlPercentage', function($filter) {
    // A directive for both formatting and properly validating a percentage value. 
    // Assumes that our internal model is expressed as floats -1 to +1: .099 is 9.9%
    // Formats display into percents 1-100, and parses user inputs down to the model. 
    // Parses user input as floats between 0 and 100 into floats less than 1. 
    // Validates user input to be within the range -100 to +100. 
    // Sets Angular $valid property accordingly on the ngModelController.
    // If a `pct-max` or `pct-min` attribute is specified on the <input>, will use those bounds instead.
    // If a `pct-decimals` attr present, will truncate inputs accordingly. 

    function outputFormatter(modelValue, decimals) {
      var length = decimals || 2;
      if (modelValue != null) {
        return $filter('number')(parseFloat(modelValue) * 100, length);
      } else {
        return undefined;
      }
    };

    function inputParser(viewValue, decimals) {
      var length = decimals || 4;
      if (viewValue != null) {
        return $filter('number')(parseFloat(viewValue) / 100, length);
      } else {
        return undefined;
      }

    }

    function isWithinBounds(value, upper, lower) {
      if (value >= lower && value <= upper) {
        return true;
      } else {
        return false;
      }
    }

    return {
      restrict: 'A',
      require: 'ngModel',
      link: function postLink(scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
          // confirm the input from the view contains numbers, before parsing
          var numericStatus = viewValue.match(/(\d+)/),
            min = parseFloat(attrs.pctMin) || -100,
            max = parseFloat(attrs.pctMax) || 100,
            decimals = parseFloat(attrs.pctDecimals) || 4,
            bounded = isWithinBounds(viewValue, max, min);
          if (numericStatus !== null && bounded) {
            ctrl.$setValidity('percentage', true);
            // round to max four digits after decimal
            return inputParser(viewValue, decimals);
          } else {
            ctrl.$setValidity('percentage', false);
            return undefined
          }
        });

        ctrl.$formatters.unshift(outputFormatter);
        // we have to watch for changes, and run the formatter again afterwards
        element.on('change', function(e) {
          var element = e.target;
          element.value = outputFormatter(ctrl.$modelValue, 2);
        });
      }
    };
  });


// REFS: 
// http://stackoverflow.com/questions/17344828/angularjs-should-i-use-a-filter-to-convert-integer-values-into-percentages
// http://stackoverflow.com/questions/13668440/how-to-make-a-percent-formatted-input-work-on-latest-angularjs
于 2014-10-30T02:54:10.230 に答える