Angularjs에서 소수점 이하의 숫자의 크기를 고정하는 방법은 무엇입니까?

Question

아래 코드를 사용하여 입력란의 유형을 수정했습니다.

"Marks %"라는 필드는 숫자와 소수 만 허용해야합니다. 소수점 이하 두 자리, 소수점 두 자리 이하 여야합니다.

내 HTML :

<div ng-app="jmApp"> 
    <h2>Validate Price</h2> 
    <div ng-controller="MainCtrl"> 

     <input type="text" ng-model="salary" valid-number /> 
    </div> 
</div> 

내 컨트롤러 :

var app = angular.module('jmApp', []); 

    app.controller('MainCtrl', function($scope) { 
    }); 

    app.directive('validNumber', function() { 
     return { 
     require: '?ngModel', 
     link: function(scope, element, attrs, ngModelCtrl) { 
      if(!ngModelCtrl) { 
      return; 
      } 

      ngModelCtrl.$parsers.push(function(val) { 
      if (angular.isUndefined(val)) { 
       var val = ''; 
      } 

      var clean = val.replace(/[^0-9\.]/g, ''); 
      var negativeCheck = clean.split('-'); 
      var decimalCheck = clean.split('.'); 
      if(!angular.isUndefined(negativeCheck[1])) { 
       negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length); 
       clean =negativeCheck[0] + '-' + negativeCheck[1]; 
       if(negativeCheck[0].length > 0) { 
        clean =negativeCheck[0]; 
       } 

      } 

      if(!angular.isUndefined(decimalCheck[1])) { 
       decimalCheck[0] = decimalCheck[0].slice(0,2); 
       decimalCheck[1] = decimalCheck[1].slice(0,2); 
       clean =decimalCheck[0] + '.' + decimalCheck[1]; 
      } 

      if (val !== clean) { 
       ngModelCtrl.$setViewValue(clean); 
       ngModelCtrl.$render(); 
      } 
      return clean; 
      }); 

      element.bind('keypress', function(event) { 
      if(event.keyCode === 32) { 
       event.preventDefault(); 
      } 
      }); 
     } 
     }; 
    }); 

출력 :

It is allowing only numbers. 
It will consider only two digits after decimal point. 
If I entered any number of digits followed by decimal point it accepts only first two digits and decimal point. 

하지만 ENTERE 경우 d 개의 정수를 생각하면 여러 개의 숫자가 고려됩니다.

누구든지 정수의 크기를 제한하는 방법을 알려주십시오. 또는 여러 자릿수도 입력 한 경우에도 소수점이있는 경우 처음 두 자릿수 만 고려해야합니다.

Answer 1

당신은 그위한 정의 지시어를 사용할 수 있습니다. 같은

뭔가 :

var app = angular.module('myApp', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
}); 
 

 
app.directive("marksRegex", function() { 
 

 
    var regexp; 
 
    return { 
 
    restrict: "A", 
 
    link: function(scope, elem, attrs) { 
 
     regexp = /^([0-9]([0-9]([\.]([0-9]([0-9]?)?)?)?)?)?$/; 
 
     var char; 
 
     elem.bind("keypress", function(event) { 
 
     if (event.which == 8) return; 
 
     char = String.fromCharCode(event.which); 
 
     if (!regexp.test(elem.val() + char)) 
 
      event.preventDefault(); 
 
     }) 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MainCtrl"> 
 
    <label>Marks %:</label> 
 
    <input type="text" marks-regex> 
 
    </div> 
 
</div>

Answer 2

이 유효성 검사가 필요한 입력 유형 ID에 keypress 이벤트를 추가하십시오.

$("elementID").keypress(function (e) { 
     if (e.which != 8) { 
      var numberEntered = this.value + e.char; 
      var value = numberEntered.match(/^[0-9]{1,3}(\.[0-9]{0,2})?$/); 

      if (numberEntered.indexOf('.') > 2) { 
       return false; 
      } 

      if (value == null) { 
       return false; 
      } 
      else { 
       var x = parseFloat(value); 
       if (isNaN(x) || x < 0 || x > 100) { 
        return false; 
       } 
      } 
     } 
     return true; 
    });