web-dev-qa-db-ja.com

AngularJSおよびAngularUI：バインド時に電話番号をマスクまたはフォーマットする

私は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は異なる場所にある2つの異なるファイルにあるため、 "$ viewValue"を使用することはオプションではありません

何か案が？

angularUIマスクに関するドキュメント： http://angular-ui.github.io/ui-utils/

ありがとう！

angularjsangular-uing-bind-html
12
lito

ui-mask="(999) 999-9999"の代わりにui-mask="{{'(999) 999-9999'}}"を使用する必要があります。

後者は、'(999) 999-9999'を使用してモデルにバインドしようとします。

21
Tom Tavernier

これまでのところ、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(/^\+/, '');
        ...

乾杯！

7
lito

独自のマスキングを作成したり、独自のディレクティブを作成したりする代わりに、既存のソリューションを利用できます。

Tel.jsを例にとります。これは、国際電話番号をフォーマットして検証するinput [tel]ディレクティブです。

次のようにbowerからインストールできます。

bower install teljs --save

次に：

  1. 「src」フォルダーにある2つのスクリプトファイル、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の開発者です。

3
Michael Krog

ui-maskdemo で見ることができます。少しチートして、ngModelControllerの$viewValueを使用します。

だから、あなたは同じことを試すことができます。

最初に、入力フィールドに名前を追加し、フォームに（名前付きで）ラップする必要があります。

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

ただし、フィルターも提供していた方がよかったでしょう。

また、 i-maskのデモ では、$viewValueのlengthに基づいて表示および非表示になっていることがわかります。

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

お役に立てれば。

2
Davin Tryon

Find Plunker for Credit Card Numbers anglejsディレクティブを使用します。 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";
  }]);
0
Sagar Bhosale