javascript - 允许输入类型中的数字范围 - plunker

Question

请参阅 plunker。 http://plnkr.co/edit/EzMmIUYSa11Pl6vbwV7o?p=preview

如您所见，有两个输入字段，每个输入字段前面都有一个说明。

目前，它允许用户允许其中的正值和负值。我希望它在第一个字段中仅允许 0 到 10 范围内的正值和 -1 到 0 范围内的负值。

我怎样才能在这里实现这个目标？有人可以帮忙吗？

HTML 代码

<div ng-controller="MainCtrl">
  Positive from 0 to 10 only<input type="text" ng-model="amount" format="number" /><br><br>

  Negative from -1 to 0 only<input type="text" ng-model="amount1" format="number" />
</div>

JS代码

var app = angular.module('App',[]);
app.controller('MainCtrl', function ($scope) { 
});

app.directive('format', ['$filter', function ($filter) {
return {
    require: 'ngModel',

    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) return;


        ctrl.$formatters.unshift(function (a) {
            return $filter(attrs.format)(ctrl.$modelValue);
        });


        ctrl.$parsers.unshift(function (viewValue) {
            var plainNumber = viewValue.replace(/[^\d|\-+]/g, '');
            elem.val($filter('number')(plainNumber/100,2));
            return plainNumber;
        });
    }
};
}]);

Answer 1

您可以使用 HTML5 输入类型

<input type="number" max="10" min="0" step="0.01" ng-model="amount" format="number" />
<input type="number" step="0.01" max="1" min="0" ng-model="amount1" format="number" />