नवीनतम AngularJS पर प्रतिशत स्वरूपित इनपुट कार्य कैसे करें?

Question

मैंने यह समाधान 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>​ 

जावास्क्रिप्ट:

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 मान को धक्का नहीं देता है।

या शायद पहले से ही एक अंतर्निहित फॉर्मेटर प्रतिशत के लिए है? मैं मुद्रा फॉर्मेटर भी चाहता था, या अल्पविराम से अलग संख्या चाहता था।

Answer 1

फिडल वर्तमान कोणीय संस्करण के साथ काम नहीं करता है क्योंकि कुछ एपीआई बदल गए हैं। 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 सेवा के माध्यम से पहुँचा रहे हैं कुछ दिखेगा। http://docs.angularjs.org/api/ng.filter:number

मूल उदाहरण के लिए

अपडेट किया गया बेला: http://jsfiddle.net/abhaga/DdeCZ/18/

मुद्रा फिल्टर कोणीय में पहले से ही उपलब्ध है: http://docs.angularjs.org/api/ng.filter:currency

Answer 2

प्रतिशत फिल्टर लागू करने के लिए एक और तरीका है (कोणीय # के साथ काम करता ~ 1.2 आप प्रलेखन यहां पा सकते हैं):

angular.module('moduleName') 
.filter('percentage', ['$filter', function($filter) { 
    return function(input, decimals) { 
     return $filter('number')(input*100, decimals)+'%'; 
    }; 
}]); 

इसका उपयोग कैसे करें:

<span>{{someNumber | percentage:2}}</span> 

Answer 3

यहां एक पूर्ण निर्देश है जो पार्स, प्रारूप, होगा और इनपुट पर कोणीय सत्यापन निष्पादित करेगा। (कोणीय 1.2 & 1.3 के खिलाफ परीक्षण किया गया।)

हम इसका उपयोग करते हैं ताकि सर्वर से/से हमारे डेटा मॉडल को दशमलव नोटेशन (0.7634) में व्यक्त किया जा सके, लेकिन हम उपयोगकर्ता को मानव-पठनीय प्रारूप (76.34) प्रदान करते हैं, और अधिकतम परिशुद्धता लागू करें। ध्यान दें कि यह निर्देश पूरी तरह से संख्यात्मक पहलुओं से संबंधित है। मुझे इसे शामिल करने के बजाय अलग-अलग टेम्पलेट में '%' डालना आसान लगता है।

यह इनपुट मूल्यों को -100 से 100 तक लागू करने के लिए डिफ़ॉल्ट है, लेकिन आप attrs pct-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 

Answer 4

मैंने अबागा के उत्तर को ## और ## इनपुट की अनुमति देने के लिए संशोधित किया। मेरी राय में यह बहुत अधिक उपयोगकर्ता के अनुकूल है

link: function(scope, element, attr, ngModel) { 
      ngModel.$parsers.unshift(
       function(viewValue){ 
        var perc = parseFloat(viewValue); 
        if (perc<0 || perc>100 || !isFinite(perc)){ 
         return null; 
        } 
        if (perc>1 && perc<=100){ 
         return parseFloat($filter('number')(perc/100)); 
        } 
        return perc; 
       } 
      ); 
      ngModel.$formatters.unshift(
       function(modelValue){ 
        if(!isFinite(modelValue)){ 
         return ""; 
        } 
        return $filter('number')(parseFloat(modelValue)*100, 2); 
       } 
      ); 
     }