AngularJS:将过滤器添加到type =" number"在angular之前输入元素解析任何东西

时间:2014-08-08 13:07:20

标签: javascript angularjs angularjs-directive

我的网络应用程序适用于波斯语用户,他们可能会输入波斯语数字。

我想在<input>元素中添加一个指令type="number",将波斯数字转换为英文数字。我应该这样做,因为我想计算绑定到输入的模型的值的总和。这是缩小的html代码:

<input type="number" ng-model="item.count1">
<input type="number" ng-model="item.count2">
total count: {{item.count1 + item.count2}}

在阅读this question的最佳答案后,我写了这个指令:

module.directive('input', function() {
return {
    restrict: 'E',
    require: 'ngModel',
    link: function (scope, element, attr, ngModel) {
        if (attr.type !== 'number') return;

        function toEnglishNumber(value) {
            if (!value) {
                return;
            }
            var englishNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
                persianNumbers = ["۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", "۰"];

            for (var i = 0, numbersLen = persianNumbers.length; i < numbersLen; i++) {
                value = value.replace(new RegExp(persianNumbers[i], "g"), englishNumbers[i]);
            }
            console.log(value);
            return value;
        }

        function fromUser(text) {
            return toEnglishNumber(text);
        }
        ngModel.$parsers.push(fromUser);
    }
};
});

当我在输入元素中输入波斯数字时,不调用toEnglishNumber函数(不调用console.log(value))。但是当我输入英文数字时,这个函数id被调用。我认为角度忽略了价值,因为它不是数字。

如何判断角度让我在忽略它之前解析它?还是有更好的解决方案?谢谢!

1 个答案:

答案 0 :(得分:2)

问题是“浏览器区域设置”具体。如果浏览器无法将符号(例如۱۰)识别为数字,则在数字字段中输入该符号会使浏览器忽略(即字段值为空(尽管输入字段中有内容)。

我不确定具有波斯语区域设置的浏览器是否能正确识别该符号为数字,但是(为了安全起见)我建议您使用input[type="text"]