输入Angularjs number $ filter指令要求用户按两次十进制
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了输入Angularjs number $ filter指令要求用户按两次十进制相关的知识,希望对你有一定的参考价值。
我试图将输入限制为仅限数字和小数,将分数大小固定为最大值2,并用逗号掩盖viewValue,并将modelValue保持为数字。下面的代码几乎完美无缺,除了为了添加小数,用户必须按两次.
键。任何想法为什么第一次按下剥离小数?
var app = angular.module('myApp', []);
app.controller('pageCtrl', function($scope){
$scope.myModel = 0;
});
app.directive('formatter', ['$filter', function ($filter) {
return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl || !attrs.formatter) return;
ctrl.$formatters.unshift(function (a) {
return $filter(attrs.formatter)(ctrl.$modelValue, 2)
});
ctrl.$parsers.unshift(function (viewValue) {
var plainNumber = viewValue.replace(/[^0-9.]/g, '');
var fractionSize = 0;
if (plainNumber.indexOf('.') >= 0) {
var parts = plainNumber.split('.');
fractionSize = parts[1].length > 2 ? 2 : parts[1].length;
}
elem.val($filter(attrs.formatter)(plainNumber, fractionSize));
return plainNumber;
});
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="myApp">
<div ng-controller="pageCtrl">
<input formatter="number" ng-model="myModel">
{{ myModel }}
</div>
</body>
答案
这是因为当提供的number
参数为零时,AngularJS中的fractionSize
过滤器会删除小数。
您可以自己确认:
<!-- 2 -->
{{ 2. | number:0 }}
因此,为了解决它,只需有条件地应用number
过滤器:
elem.val(fractionSize ? $filter(attrs.formatter)(plainNumber, fractionSize) : plainNumber);
以上是关于输入Angularjs number $ filter指令要求用户按两次十进制的主要内容,如果未能解决你的问题,请参考以下文章