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掩码的简单解决方案，所以我不得不创建一个过滤器。我遵循这个：Format telephone and credit card numbers in 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

您可以使用现有解决方案，而不是自己进行掩蔽或建立自己的指令。

以tel.js为例。它是一个输入[tel]指令，可以为您格式化和验证国际电话号码。

你可以像这样从凉亭安装它：

bower install teljs --save

然后：

链接＆＃39; src＆＃39;中的两个脚本文件。文件夹：tel.js和metadatalite.js。

<script src="bower_components/teljs/src/tel.js"></script>
<script src="bower_components/teljs/src/metadatalite.js"></script>

加载tel.js模块。

angular.module('<your module>', ['teljs']);

你可以在这里试试tel.js：

http://michaelkrog.github.io/tel.js/

备注：我是tel.js的开发者。

Answer 4

我可以在ui-mask demo中看到，他们作弊并使用$viewValue中的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>

如果他们也提供过滤器会更好。

此外，我可以在the demo for ui-mask中看到它们根据length的{{1}}显示和隐藏：

$viewValue

希望这有帮助。

Answer 5

使用angularjs指令查找Plunker for Formatting Credit Card Numbers。格式化卡号在xxxxxxxxxxxx3456 Fromat中。

    angular.module('myApp', [])

   .directive('maskInput', function() {
    return {
            require: "ngModel",
            restrict: "AE",
            scope: {
                ngModel: '=',
             },
            link: function(scope, elem, attrs) {
                var orig = scope.ngModel;
                var edited = orig;
                scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);

                elem.bind("blur", function() {
                    var temp;
                    orig  = elem.val();
                    temp = elem.val();
                    elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
                });

                elem.bind("focus", function() {
                    elem.val(orig);
               });  
            }
       };
   })
  .controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
    $scope.creditCardNumber = "1234567890123456";
  }]);

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

5 个答案: