SoFunction
Updated on 2025-04-11

Example of the input box digital tensile and retaining several decimal points function implemented by angular

This article describes the angular input box numerical tensile function and retains several decimal points. Share it for your reference, as follows:

I found an instruction about the thousandths online. I made some improvements and general instruction code.

('price', function($parse) {
 return {
  link: function (scope, element, attrs, ctrl) {
    //Control input box can only enter numbers and decimal points    function limit(){
      var limitV=element[0].value;
      limitV=(/[^0-9.]/g,"");
      //Processing integers starting with 0      if ((/^0+[0-9]+$/).test(limitV)) {
        limitV=(/\b(0+)/gi,"");
      }
      //Limit the number of digits after the decimal point      var digits = attrs['digits']?Number(attrs['digits']):2;
      if (limitV*(10,digits)%1!=0) {
        var index = ('.');
        var last = index+digits+1;
        limitV = (""+limitV).substring(0,last);
      }
      element[0].value=limitV;
      $parse(attrs['ngModel']).assign(scope, limitV);
      format();
    }
    //Insert a thousand separator to the integer part of the input number    function format(){
      var formatV=element[0].value;
      var array=new Array();
      array=(".");
      var re=/(-?\d+)(\d{3})/;
      while((array[0])){
        array[0]=array[0].replace(re,"$1,$2")
      }
      var returnV=array[0];
      for(var i=1;i<;i++){
        returnV+="."+array[i];
      }
      element[0].value=returnV;
      $parse(attrs['ngModel']).assign(scope, formatV);
    }
    scope.$watch(,function(){
      limit();
    })
  }
 };
})

References to html code, digits passes the decimal point and retains several digits after the decimal point. By default, it does not pass the 2 digits.

<input ng-model="money" price digits="1"/>

PS: Here are a few online computing tools for your reference:

Online investment and financial management calculator:
http://tools./jisuanqi/touzilicai_calc

Online Deposit Calculator:
http://tools./jisuanqi/cunkuan_calc

Scientific Calculator Online Use_Advanced Calculator Online Calculator:
http://tools./jisuanqi/jsqkexue

Online Calculator_Standard Calculator:
http://tools./jisuanqi/jsq

For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary

I hope this article will be helpful to everyone's AngularJS programming.