如何使用角度ui-mask屏蔽带有可选扩展名的电话号码？

Question

我们演示在这里的角UI页面上.

想知道我们如何编写带有可选分机号码的面罩.

(999) 999-9999 ext. 999 将进行扩展.

Answer 1

我和你分享了同样的问题.此组件有一个完全未记录的可选字符功能.我只能通过阅读源代码找到它.

面具的解决方案是:

(999) 999-9999 ext. ?9?9?9

掩码中的问号会将下一个字符标记为可选.相信我,它有效.

很抱歉花了这么长时间才回答.

Answer 2

两周后仍然没有答复。我假设所有人都同意 AngularUI 在处理这种情况方面太有限了。

我最终使用了jquery.inputmask（http://github.com/RobinHerbots/jquery.inputmask）。

自从没有 Angular 以来，我们一直在使用这个 jQuery 扩展库。它似乎仍然是最强大的输入掩码。至少它有我需要的所有功能。

这是我的设置。

1. 首先当然是去NuGet或者下载库。当前版本（3.0.55）将函数分离到不同的js文件中。（日期、数字、电话...）请务必包含您需要的所有内容。

2. 为输入掩码属性或类创建指令。在此指令中使用linkjQuery 来应用输入掩码：

这是代码：

(function(){
    'use strict';        
    var directiveId = 'myInputMask';
    angular.module('myApp')..directive(directiveId, function() {
        return {
            restrict: 'AC',
            link: function (scope, el, attrs) {
                el.inputmask(scope.$eval(attrs.myInputMask));
                el.on('change', function() {
                    scope.$eval(attrs.ngModel + "='" + el.val() + "'");
                    // or scope[attrs.ngModel] = el.val() if your expression doesn't contain dot.
                });
            }
        }
    });
})();    

1. 最后，在我们的 Html 中的属性或类中应用此指令。

这是 HTML：

<input type="text" id="phone"
    my-input-mask="{mask: '(999)999-9999[ ext. 9999]', greedy: false}"
    required="" ng-model="employee.phone">

当然，使用jquery.inputmask，我们可以拥有更复杂的输入掩码：

<input type="text" id="salary"
    dnr-input-mask="{'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': true, 'placeholder': '0'}"
    model="employee.salary">

所以结论是：AngularUI 要满足我们的需求还有很长的路要走。此刻，jQuery.inputmask依然欣欣向荣。