AngularJS und AngularUI: Maske oder formatieren Sie eine Telefonnummer bei der Bindung

Ich bin mit AngularUI zu formatieren oder "Maskierung" Telefon-Nummer-Eingang, und es funktioniert gut mit einem ng-model:

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

Frage:
Aber jetzt, wie kann ich mich bewerben, die gleiche Maske in der gleichen Weise über ng-bind, ich habe so etwas wie dieses:

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

Mein problem:
Das ng-Modell-und ng-bind sind in zwei verschiedenen Dateien an verschiedenen Orten, deshalb ist das verwenden von "$viewValue" ist keine option für mich

Irgendeine Idee?

einige Unterlagen über AngularUI Maske: http://angular-ui.github.io/ui-utils/

Dank!

InformationsquelleAutor lito | 2013-11-19

21

Sollten Sie verwenden ui-mask="(999) 999-9999" statt ui-mask="{{'(999) 999-9999'}}".

Letztere versucht, eine Bindung zu einem Modell mit '(999) 999-9999'.

Dies ist die richtige Antwort.

InformationsquelleAutor Tom Tavernier
7

Bisher konnte ich nicht finden, eine einfache Lösung mit AngularUI-Maske, so hatte ich, um einen filter zu erstellen. Ich verfolge diese: Format Telefon-und Kreditkartennummern in AngularJS

Und hier ist das jsfiddle: http://jsfiddle.net/jorgecas99/S7aSj/
```
angular.module('ng').filter('tel', function () {
    return function (tel) {
        if (!tel) { return ''; }

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

InformationsquelleAutor lito
3

Anstatt Ihre eigenen Maskierung oder vielleicht den Aufbau Ihrer eigenen Richtlinie können Sie Gebrauch machen von bestehenden Lösungen.

Nehmen tel.js zum Beispiel. Es ist ein input[tel] Richtlinie Formaten ein und prüft Sie internationale Telefon-Nummern für Sie.

Können Sie es von bower wie diese:
```
bower install teljs --save
```
Dann:
1. Link die beiden script-Dateien in das 'src' - Ordner: tel.js und metadatalite.js.
```
<script src="bower_components/teljs/src/tel.js"></script>
<script src="bower_components/teljs/src/metadatalite.js"></script>
```
2. Laden tel.js -Modul.
```
angular.module('<your module>', ['teljs']);
```
Können Sie ausprobieren tel.js hier:

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

Bemerkung: ich bin der Entwickler tel.js.

InformationsquelleAutor Michael Krog
2

Kann ich sehen, in der ui-mask demo, Sie zu betrügen ein wenig und verwenden die $viewValue aus ngModelController.

Also, könnten Sie versuchen, die gleiche Sache.

Ersten, müssen Sie hinzufügen einen Namen für das Eingabefeld und eingewickelt in eine form (mit Namen):
```
<form name="demo">
    <input name="emerPhone" ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/>
    <td>{{demo.emerPhone.$viewValue}}</td>
</form>
```
Wie Sie sehen können aus dem obigen Beispiel, der display-code wird:
```
<td>{{demo.emerPhone.$viewValue}}</td>
```
Wäre es besser gewesen, wenn Sie hätte ein filter auch, aber.

Ich kann auch sehen, dass in die demo für ui-Maske, Sie ein-und ausblenden auf der Grundlage der length des $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>
```
Hoffe, das hilft.

Hi @Davin, vielen Dank für dein Kommentar :)... leider kann ich auf diese Weise, weil mein ng-Modell-und ng-bind sind in zwei verschiedenen Ansichten und verschiedenen Dateien, daher die $viewValue-id nicht verfügbar :(. Id gibt es keine andere option für mich?
Mit ui-Maske scheint es nicht zu sein, eine andere option. Sie können schreiben Sie Ihre eigenen filter.
Tippfehler: "leider kann ich nicht benutzen,* ihn"
ok Super!!! Ich werde einen filter hinzufügen, dann. danke!

InformationsquelleAutor Davin Tryon

Finden Plunker für die Formatierung Kreditkarte Zahlen mit angularjs Richtlinie. Karte formatieren Zahlen in 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";
  }]);

InformationsquelleAutor Sagar Bhosale

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.