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

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

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

Answer 2

您可以使用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" />

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

2 个答案: