Wie man ein Prozent formatierte Eingabe-Arbeit auf den neuesten AngularJS?

The fiddle funktioniert nicht mit der aktuellen Winkel-version schon ein paar APIs haben sich geändert, seit. angular.formatter ist nicht mehr verfügbar und weder ist angular.filter.

Die Art und Weise, es zu schreiben, nun, ist die Verwendung einer Richtlinie und nutzen $parser und $formatter erhältlich über die Richtlinie controller. Damit Ihr link-Funktion sieht in etwa wie

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);
            }
        );
      }

Auch die Filter sind jetzt aufgerufen durch $filter service. Die Dokumentation finden Sie hier: https://docs.angularjs.org/api/ng/filter/number

Aktualisiert fiddle für das original-Beispiel: http://jsfiddle.net/abhaga/DdeCZ/18/

Währung filter ist bereits im eckigen: https://docs.angularjs.org/api/ng/filter/currency

InformationsquelleAutor abhaga

Hier ist ein full-Richtlinie, parse, format und führen Eckig überprüfung der Eingänge. (Getestet gegen kantige 1.2 & 1.3.)

Verwenden wir diese, so dass unser Datenmodell zum/vom server kann ausgedrückt werden in decimal-notation (0.7634), aber wir bieten einem lesbaren format an den Benutzer (76.34), und erzwingen eine maximale Genauigkeit. Beachten Sie, dass diese Richtlinie betrifft rein mit der numerischen Aspekte. Ich finde es einfacher, fügen Sie ein '%' in der Vorlage separat, als auch hier.

Standardwerte für die Durchsetzung der input-Werte von -100 bis 100, aber Sie können Ihre eigenen Grenzen mit attrs pct-min und 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

InformationsquelleAutor XML