AngularJS和AngularUI:绑定时屏蔽或格式化电话号码

Question

我正在使用AngularUI来格式化或"屏蔽"电话号码输入,并且它可以与ng-model一起使用:

<input ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/>

问题:但是现在如何使用ng-bind以相同的方式应用相同的掩码,我有这样的事情:

<td>{{emer.phone}}</td>

我的问题:ng-model和ng-bind位于不同位置的两个不同文件中,因此使用"$ viewValue"不是我的选择

任何的想法？

关于AngularUI掩码的一些文档:http://angular-ui.github.io/ui-utils/

谢谢!

Answer 1

你应该使用ui-mask="(999) 999-9999"而不是ui-mask="{{'(999) 999-9999'}}".

后者试图绑定到模型'(999) 999-9999'上.

Answer 2

到目前为止我找不到使用AngularUI掩码的简单解决方案,所以我不得不创建一个过滤器.我遵循这个:格式化AngularJS中的电话和信用卡号码

这里是jsfiddle:http://jsfiddle.net/jorgecas99/S7aSj/

angular.module('ng').filter('tel', function () {
    return function (tel) {
        if (!tel) { return ''; }

        var value = tel.toString().trim().replace(/^\+/, '');
        ...

干杯!

Answer 3

ui-mask 我可以在演示中看到，他们做了一些作弊并使用了$viewValuefrom ngModelController。

所以，你可以尝试同样的事情。

首先，您必须将名称添加到输入字段并包装在表单中（带有名称）：

<form name="demo">
    <input name="emerPhone" ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/>
    <td>{{demo.emerPhone.$viewValue}}</td>
</form>

从上面的例子可以看到，显示代码变为：

<td>{{demo.emerPhone.$viewValue}}</td>

不过，如果他们也提供一个过滤器就更好了。

另外，我可以看到在ui-mask 的演示中，它们根据length以下内容显示和隐藏$viewValue：

<div ng-show="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>{{ demo.masked.$viewValue
              }}</code></div>
            <div ng-hide="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>undefined</code></div>

希望这可以帮助。