我想在输入字段中添加过滤器,但它会出错。我想如果我在输入字段中键入 1k ,则会在输入字段中显示文本 1,000 (价值)..换句话说,如果我输入 1k ..转换1k或删除/更改1k为1000。
我尝试了但不行。我的代码是
http://plnkr.co/edit/6E4pe6RO8WwhINTpEf27?p=preview
.filter('toNumber', function($filter) {
var numberFilter = $filter('number');
var dict = {
k: 1000,
l: 100000
};
var regex = /^([-+]?[0-9]*\.?[0-9]+)([kl])$/;
return function(val, fraction) {
var match;
if(angular.isString(val) && (match = val.match(regex)) ) {
val = match[1] * dict[match[2]];
}
return numberFilter(val, fraction || 0);
};
});
答案 0 :(得分:1)
在您的情况下,您不应使用过滤器,因为它只是格式化值,而不是更改它。此外,ngModel是双向绑定,仅支持变量实现。
您可以改为使用指令:
JS(加上Cameron Morrow提出的改进:)
.directive('toNumber', function(numberFilter) {
var dict = {
k: 1000,
l: 100000
};
var regex = /^([-+]?[0-9,]*\.?[0-9]+)([kl])$/;
return {
require: 'ngModel',
link: function link(scope, element, attr, ngModel) {
scope.$watch(attr.ngModel, function(val) {
var match;
if(angular.isString(val) && (match = val.match(regex)) ) {
val = match[1].replace(/,/g , "") * dict[match[2]];
scope[attr.ngModel] = numberFilter(val, 0);
}
})
}
}
})
HTML
<div ng-controller='cntrl'>
<input type='text' to-number ng-model='user'>
</div>
答案 1 :(得分:0)
我会更换一个ng-change。
<div ng-app="app">
<div ng-controller="ParentCtrl">
<input ng-model="inputValue" ng-change="inputValueChanged()" />
</div>
</div>
的Javascript
angular.module('app', [])
function ParentCtrl($scope){
$scope.inputValueChanged = function(){
if($scope.inputValue === '1k'){
$scope.inputValue = '1000';
}
}
}
答案 2 :(得分:0)
<强>控制器:强>
angular.module('app',[]).controller('cntrl',function($scope){
$scope.user ="";
var dict = {
k: 1000,
l: 100000
};
var regex = /^([-+]?[0-9]*\.?[0-9]+)([kl])$/;
$scope.$watch('user', function() {
var match;
var val = $scope.user;
if(angular.isString(val) && (match = val.match(regex)) ) {
$scope.user = match[1] * dict[match[2]];
}
});
});
和 HTML :
<div ng-controller='cntrl'>
<input type='text' ng-model='user'>
</div>