एचटीएमएल 5 प्रकार में दशमलव की संख्या सीमित करें (AngularJS मॉडल के साथ) = "number" इनपुट क्षेत्र

Question

कृपया बेला http://jsfiddle.net/q2SgJ/5/

<div ng-app=""> 
    <div ng-controller="Ctrl"> 

     WANTS: {{val | number:2}} in "input" elelent<br> 
    2 decimal in input: <input ng-model='val'> <br> 
    2 decimal in input: <input type="number" step="0.01" ng-model='val'><br> 
    2 decimal in input: <input ng-model='val' value="{{val |number:2}}"> <br> 

    </div> 
</div> 

लगता है मैं एक इनपुट क्षेत्र में 2 अंकों के दशमलव स्थानों कैसे रोक सकते हैं। उदाहरण के रूप में {{val | number:2}} काम करता है, लेकिन यह सुनिश्चित नहीं है कि किसी क्षेत्र से जुड़े एनजी-मॉडल को प्रारूपित करने के लिए इसका उपयोग कैसे किया जाए। मैं डेटा/मॉडल को स्वरूपित कर सकता था, लेकिन मेरे पास कुछ दशमलव हैं जो मुझे अतिरिक्त दशमलव रखना पसंद है, लेकिन केवल 2 दशमलव प्रदर्शित करें।

धन्यवाद।

Answer 1

आप इस कार्यक्षमता को नियंत्रित करने के लिए एक निर्देश लिख सकते हैं। यह ऐसा कुछ नहीं है जो कोणीय वाले जहाज हैं, लेकिन निर्देश इस बात पर नियंत्रण कर सकते हैं कि पृष्ठ पर चीजें कैसे दिखती हैं और काम करती हैं।

मैंने लिखा एक सरल एक: http://jsfiddle.net/q2SgJ/8/

यह लिंकिंग समारोह है कि चाल करता है:

link:function(scope,ele,attrs){ 
     ele.bind('keypress',function(e){ 
      var newVal=$(this).val()+(e.charCode!==0?String.fromCharCode(e.charCode):''); 
      if($(this).val().search(/(.*)\.[0-9][0-9]/)===0 && newVal.length>$(this).val().length){ 
       e.preventDefault(); 
      } 
     }); 
    } 

2 दशमलव स्थानों के लिए इनपुट सीमित पर काम करता है, लेकिन इनपुट प्रारूप नहीं है दो दशमलव स्थानों पर। वैसे भी, यह एक शुरुआती बिंदु है। मुझे यकीन है कि आप अन्य उदाहरण देख सकते हैं और जिस तरह से आप चाहते हैं उसे संभालने के लिए अपना खुद का निर्देश लिख सकते हैं। कोणीय के बारे में बात यह है कि यह प्रत्येक प्रश्न के उत्तर के साथ एक ढांचा नहीं है, लेकिन एक ढांचा है जो आपको HTML5 की तुलना में अतिरिक्त कार्यक्षमता बनाने की अनुमति देता है और इसे बहुत सरल बनाता है।

Answer 2

मैंने कितने दशमलव स्थानों को सीमित करने के लिए चरण विशेषता को देखने के लिए स्वीकृत उत्तर पर विस्तार किया।

directive('forcePrecision', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      step: '@' 
     }, 
     link: function (scope, element, attrs) { 
      if (!scope.step || scope.step == 'any') { 
       return; 
      } 

      var prec = 1; 
      for (var i = scope.step; i != 1; i *= 10) { 
       prec *= 10; 
      } 

      element.on('keypress', function (e) { 
       var val = Number(element.val() + (e.charCode !== 0 ? String.fromCharCode(e.charCode) : '')); 

       if (val) { 
        var newVal = Math.floor(val * prec)/prec; 

        if (val != newVal) { 
         e.preventDefault(); 
        } 
       } 
      }); 
     } 
    }; 
}); 

Answer 3

आप JQuery के बिना और निर्देश के बिना ऐसा कर सकते हैं। कदम के साथ आपका मूल प्रयास बहुत करीब था। मुझे this site मिला जो दिखाता है कि चरण और AngularJS नियमित अभिव्यक्ति इनपुट फ़िल्टर का उपयोग प्रतिबंधित करने के लिए HTML5 इनपुट का उपयोग कैसे करें।

<div ng-app="app"> 
    <div ng-controller="Ctrl"> @*Just an empty controller in this example*@ 
     <form name="myForm"> 
      <input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" /><br /> 
      Is a valid decimal?<span ng-show="!myForm.myDecimal.$valid">{{myForm.myDecimal.$valid}}</span> 
     </form> 
    </div> 
</div>