13

我正在使用 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/

谢谢！

4

5 回答 5

22

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

后者试图绑定到一个带有'(999) 999-9999'它的模型。

于 2014-07-29T10:39:51.713 回答
7

到目前为止，我找不到使用 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(/^\+/, '');
        ...

干杯!

于 2013-11-20T15:54:36.297 回答
3

您可以利用现有的解决方案，而不是制作自己的掩码或构建自己的指令。

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

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

bower install teljs --save

然后：

  1. 链接“src”文件夹中的两个脚本文件：tel.js 和 metadatalite.js。

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

  2. 加载 tel.js 模块。

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

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

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

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

于 2014-09-16T09:44:20.973 回答
2

我可以在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>

希望这可以帮助。

于 2013-11-19T23:21:04.417 回答
0

使用 angularjs 指令查找用于格式化信用卡号的 Plunker。在 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";
  }]);
于 2016-09-23T09:05:02.163 回答