在angularjs中允许一个小数

时间:2017-06-09 12:09:10

标签: javascript angularjs

这是我的代码的简短版本。

<div>
  <input type="number" name="content" md-auto-focus 
  ng-model="vm.model.content" 
  ng-required="{{vm.required === null ? true : vm.required}}" 
  ng-attr-ng-max="{{vm.max}}" ng-attr-ng-min="{{vm.min}}">
  <div ng-message-exp="['required','min']" ng-if="vm.min != null">
    <span data-translate translate-value-length="{{vm.min}}">min</span>
  </div>
  <div ng-message="required" ng-if="vm.min == null">
    <span data-translate>required</span>
  </div>
  <div ng-message="number">
    <span data-translate>numberOnly</span>
  </div>
  <div ng-message="max">
    <span data-translate translate-value-length="{{vm.max}}">max</span>
  </div>
</div>

如你所见,

https://regex101.com/r/fvPBTW/1 我使用相同的正则表达式。

它接受44.44,44,

但不是44.,44.444,44.44.44,44.44。

我认为是因为数字功能。

但我希望只输入数字和一位小数后面的数字。

所以我将数字改为文字

 <input type="text" name="content" md-auto-focus

但这次是字符串,不保存小数。

1 个答案:

答案 0 :(得分:0)

您的代码的简短版本不足以帮助您。我过去能够做你想做的事。以下是我实现它的方式。

&#13;
&#13;
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[1] = decimalCheck[1].slice(0,1);
                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();
            }
          });
        }
      };
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="jmApp">
  <h2>Validate Price</h2>
  <div ng-controller="MainCtrl">

      <input type="text" ng-model="salary" valid-number />
  </div>
</div>
&#13;
&#13;
&#13;