文本字段仅允许用户输入angularjs中的数字和小数

时间:2016-06-29 10:51:18

标签: html angularjs

我有一个文本字段,用户只需要允许数字和小数。

还需要设置最小值和最大值。

<td ng-class="{ 'has-error' : eForm.marks_{{$index}}.$dirty && eForm.marks_{{$index}}.$error.required }">                                          
    <input type="text" name="marks_{{$index}}" ng-model="data.marks" placeholder="% of Marks" ng-pattern="/^[0-9]+([,.][0-9]+)?$/" class="form-control" ng-disabled="!eEditMode[$index]"  min="1" max="100" ng-required="true">
    <span ng-show="eForm.marks_{{$index}}.$dirty && eForm.marks_{{$index}}.$error.required" class="help-block">Marks is required</span>
</td>

2 个答案:

答案 0 :(得分:2)

您可以使用数字输入:

<input type="number" name="input" ng-model="example.value"
           min="0" max="99" required>

有关详情:input components in ng / input[number]

答案 1 :(得分:0)

这对我有用:

控制器:

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();
          })
        }
      }

    });

HTML:

 <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>