Angular 货币过滤器以允许输入负数
Angular filter for currency to allow typing negative numbers
我有一个指令通过在用户输入时添加小数点来过滤货币。
我的问题是它不允许负数。如果允许用户键入“-”符号并始终出现在数字的开头,或者键入“+”并使其消失,那就太好了。
需要:
- 将十进制字段格式化为用户类型
- 字段必须是数字
- 必须允许负数
-
- 允许 0.00 作为数字输入
Check out my Plunker here。它有 input = number
但不允许负数:
app.directive('format', ['$filter', function ($filter) {
return {
require: 'ngModel', //there must be ng-model in the html
link: function (scope, elem, attr, ctrl) {
if (!ctrl) return;
ctrl.$parsers.unshift(function (viewValue, modelValue) {
var plainNumber = viewValue.replace(/[^-+0-9]/g,'');
// use angular internal 'number' filter
plainNumber = $filter('number')(plainNumber / 100, 2).replace(/,/g, '');
// update the $viewValue
ctrl.$setViewValue(plainNumber);
// reflect on the DOM element
ctrl.$render();
// return the modified value to next parser
return plainNumber;
});
}
};
}]);
这将完全按照您的要求执行:
var app = angular.module('App',[]);
app.controller('MainCtrl', function ($scope) {
});
app.directive('format', ['$filter', function ($filter) {
return {
require: 'ngModel', //there must be ng-model in the html
link: function (scope, elem, attr, ctrl) {
if (!ctrl) return;
ctrl.$parsers.unshift(function (viewValue, modelValue) {
var plainNumber = viewValue.replace(/[^-+0-9]/g,'');
var newVal = plainNumber.charAt(plainNumber.length-1);
var positive = plainNumber.charAt(0) != '-';
if(isNaN(plainNumber.charAt(plainNumber.length-1))){
plainNumber = plainNumber.substr(0,plainNumber.length-1)
}
//use angular internal 'number' filter
plainNumber = $filter('number')(plainNumber / 100, 2).replace(/,/g, '');
if(positive && newVal == '-'){
plainNumber = '-' + plainNumber;
}
else if(!positive && newVal == '+'){
plainNumber = plainNumber.substr(1);
}
plainNumber.replace('.', ',');
//update the $viewValue
ctrl.$setViewValue(plainNumber);
//reflect on the DOM element
ctrl.$render();
//return the modified value to next parser
return plainNumber;
});
}
};
}]);
只需删除 type="number" 来自:
<input ng-model="amount" format="number" />
我有一个指令通过在用户输入时添加小数点来过滤货币。
我的问题是它不允许负数。如果允许用户键入“-”符号并始终出现在数字的开头,或者键入“+”并使其消失,那就太好了。
需要:
- 将十进制字段格式化为用户类型
- 字段必须是数字
- 必须允许负数
-
- 允许 0.00 作为数字输入
Check out my Plunker here。它有 input = number
但不允许负数:
app.directive('format', ['$filter', function ($filter) {
return {
require: 'ngModel', //there must be ng-model in the html
link: function (scope, elem, attr, ctrl) {
if (!ctrl) return;
ctrl.$parsers.unshift(function (viewValue, modelValue) {
var plainNumber = viewValue.replace(/[^-+0-9]/g,'');
// use angular internal 'number' filter
plainNumber = $filter('number')(plainNumber / 100, 2).replace(/,/g, '');
// update the $viewValue
ctrl.$setViewValue(plainNumber);
// reflect on the DOM element
ctrl.$render();
// return the modified value to next parser
return plainNumber;
});
}
};
}]);
这将完全按照您的要求执行:
var app = angular.module('App',[]);
app.controller('MainCtrl', function ($scope) {
});
app.directive('format', ['$filter', function ($filter) {
return {
require: 'ngModel', //there must be ng-model in the html
link: function (scope, elem, attr, ctrl) {
if (!ctrl) return;
ctrl.$parsers.unshift(function (viewValue, modelValue) {
var plainNumber = viewValue.replace(/[^-+0-9]/g,'');
var newVal = plainNumber.charAt(plainNumber.length-1);
var positive = plainNumber.charAt(0) != '-';
if(isNaN(plainNumber.charAt(plainNumber.length-1))){
plainNumber = plainNumber.substr(0,plainNumber.length-1)
}
//use angular internal 'number' filter
plainNumber = $filter('number')(plainNumber / 100, 2).replace(/,/g, '');
if(positive && newVal == '-'){
plainNumber = '-' + plainNumber;
}
else if(!positive && newVal == '+'){
plainNumber = plainNumber.substr(1);
}
plainNumber.replace('.', ',');
//update the $viewValue
ctrl.$setViewValue(plainNumber);
//reflect on the DOM element
ctrl.$render();
//return the modified value to next parser
return plainNumber;
});
}
};
}]);
只需删除 type="number" 来自:
<input ng-model="amount" format="number" />