AngularJS и AngularUI: маскировать или форматировать номер телефона при связывании

Я использую AngularUI для форматирования или "маскировки" ввода номера телефона, и он отлично работает с ng-моделью:

<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/

Спасибо!

Ответ 1

Вы должны использовать ui-mask="(999) 999-9999" вместо ui-mask="{{'(999) 999-9999'}}".

Последний пытается связать с моделью с '(999) 999-9999' на нем.

Ответ 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(/^\+/, '');
        ...

Ура!

Ответ 3

Вместо того, чтобы создавать собственную маскировку или, возможно, создавать свою собственную директиву, вы можете использовать существующие решения.

Возьмите tel.js, например. Это директива ввода [tel], которая форматирует и проверяет международные номера телефонов для вас.

Вы можете установить его из беседки следующим образом:

bower install teljs --save

Тогда:

Свяжите два файла script, найденные в папке 'src': 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.

Ответ 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>

Было бы лучше, если бы они также предоставили фильтр.

Кроме того, я вижу, что в демо для 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>

Надеюсь, что это поможет.

Ответ 5

Найти Plunker для форматирования номеров кредитных карт, используя директиву angularjs. Форматировать номера карт в 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";
  }]);