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

【问题标题】：Allow range of numbers in input type- plunker允许输入类型中的数字范围 - plunker
【发布时间】：2016-03-17 23:26:05
【问题描述】：

请参考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;
        });
    }
};
}]);

【问题讨论】：

标签： javascript jquery html angularjs validation

【解决方案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" />

【讨论】：

@dipesh- 我试过了，但它仍然允许我输入一个大于 min 和 max 中提到的值的数字。如果 max 设置为 10，我想要阻止用户输入大于 10 的数字。
@dipesh-在我的情况下，输入类型是文本。因此 min 和 max 不起作用。
@Ayesha 如果您需要数字，那么为什么要使用文本字段？
@dipesh- 我使用了一些指令，以便输入字段允许即时使用逗号和小数点...带有数字，很难获得这种类型的验证...

【解决方案2】：

我发现 Cohen Adair 在 github 上发布的指令。这对我来说效果很好，我只需要在 css 部分工作，并且在这里和那里做一些工作，以便让它在我的项目中工作。这是链接

http://cohenadair.github.io/angular.number-input/

【讨论】：