Masque d’adresse IP pour AngularJS

Quelqu’un connaît-il un plugin de masque d’adresse IP pour AngularJS?

Parce que j’ai essayé d’utiliser le “Contrôle d’adresse IP d’entrée Jquery”, mais cela ne fonctionne pas. Lorsque j’essaie de l’utiliser, l’atsortingbut “ngModel” ne récupère pas la valeur du champ de texte. À l’écran, je peux voir la valeur à l’intérieur du champ de texte, cependant, si je fais “. Valeur ()” dans l’élément, cela retourne une “” valeur. La même chose se produit lorsque je vois la valeur de l’élément $ scope en utilisant console.log ().

Quelqu’un peut-il m’aider?

Merci!

Edit: RESOLU

Les gens, problème résolu.

J’ai utilisé cette directive disponible dans http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController :

app.directive('contenteditable', function() { return { ressortingct: 'A', // only activate on element atsortingbute require: '?ngModel', // get a hold of NgModelController link: function(scope, element, attrs, ngModel) { if(!ngModel) return; // do nothing if no ng-model // Specify how UI should be updated ngModel.$render = function() { element.html(ngModel.$viewValue || ''); }; // Listen for change events to enable binding element.bind('blur keyup change', function() { scope.$apply(read); }); read(); // initialize // Write data to the model function read() { ngModel.$setViewValue(element.val()); }; } }; }); 

Après avoir utilisé cette directive, le plugin Jquery a bien fonctionné. Probablement parce que maintenant le ngNodel obtient le element.val (). Avant, je pense que c’était obtenir l’élément.text ().

Je me demande simplement pourquoi vous en avez besoin en premier lieu. Qu’en est-il de l’utilisation de la [ngPattern][1] et placeholder atsortingbuts d’ placeholder ?

  
value : {{ ip }}

Plusieurs notes:

  • commentateurs ajoutant ^ et $ quantificateurs à la regex. Vous n’avez pas besoin de le faire puisque angular les ajoute pour vous dans ng-pattern directive ng-pattern ( voir le code source angular.js pour ng-pattern )

  • Je ne crois pas que regex est un bon match pour vérifier si chaque nombre est dans la plage [0,255]. Ce que je préférerais plutôt faire, c’est mettre en œuvre la directive ng-ipaddress, en travaillant directement avec ngModelController . (voir lien js-fiddle ou github)

     var app = angular.module('app',[]) .directive('ipAddress', function ipAddress(){ return { ressortingct:'A', require:'?ngModel', link: function(scope, elm, attr, ctrl){ if (!ctrl) return; ctrl.$parsers.push(function(viewValue){ if (!viewValue) return null; var isvalid = isValidIp(viewValue) return isvalid ? viewValue : null; }) } } function isValidIp(value){ var arr = value.split('.') var r = /^\d{1,3}$/; return arr.length === 4 && arr.map(function(e){ return ( r.test(e) && ((e|0) >= 0) && ( (e | 0) <= 255)) }).every(function(e){ return e }) } }) 

jsfiddle github

En supposant que @Jayesh réponde et fasse quelques raccourcissements, voici la version correcte résultante avec un motif pour 0.0.0.0 à 255.255.255.255

  

J’ai ajouté ng-model-options afin que la validation ne soit déclenchée que par effet de flou afin que la classe d’erreur, le cas échéant, n’apparaisse qu’après le changement de focus dans un autre champ. Cependant, cela ne fonctionne que pour AngularJS 1.3+