Маска IP-адреса для AngularJS

Кто-нибудь знает плагин маски IP-адреса для AngularJS?

Потому что я пытался использовать «Контроль IP-адреса ввода Jquery», но он не работает. Когда я пытаюсь его использовать, атрибут «ngModel» не получает значение текстового поля. На экране я вижу значение внутри текстового поля, однако, если я делаю «.value ()» в элементе, он возвращает значение «». То же самое происходит, когда я вижу значение элемента $scope с помощью console.log().

Может кто-нибудь помочь мне?

Спасибо!

Изменить: РЕШЕНО

Люди, проблема решена.

Я использовал эту директиву, доступную в http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController:

app.directive('contenteditable', function() {
    return {
        restrict: 'A', // only activate on element attribute
        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());
           };
       }
    };
});

После того, как я использовал эту директиву, плагин Jquery заработал нормально. Вероятно, потому что теперь ngNodel получает element.val(). Раньше, я думаю, он получал element.text().


javascript jquery angularjs maskedinput
person z_inx    schedule 10.06.2013    source источник
comment
Прикрепите свой код к вопросу (и/или создайте plnkr).   -  person Stewie    schedule 10.06.2013
comment
В идеале вы должны создать директиву, которая будет применять плагин jQuery, который также будет обрабатывать обновление значения ngModel.   -  person Mark Coleman    schedule 10.06.2013

Ответы (2)


arrow_upward
8
arrow_downward

Мне просто интересно, зачем вам это нужно в первую очередь. А как насчет использования директивы [ngPattern][1] и атрибута placeholder?

 <div ng-app='app' ng-controller='myCtrl' ng-form='myForm'>
   <input type='text' ng-model='ip' 
          ng-pattern='/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/' 
          placeholder='xxx.xxx.xxx.xxx'  />
   value : {{ ip }}    
 </div>

Несколько примечаний:

  • комментаторы добавляют квантификаторы ^ и $ в регулярное выражение. Вам не нужно этого делать, так как angular добавляет их для вас в директиву ng-pattern (см. исходный код angular.js для шаблона ng)

  • Я не верю, что регулярное выражение подходит для проверки того, находится ли каждое число в диапазоне [0,255]. Я бы предпочел реализовать директиву ng-ipaddress, работающую с ngModelController напрямую. (см. ссылку js-fiddle или github)

    var app = angular.module('app',[])

.directive('ipAddress', function ipAddress(){

  return {
    restrict:'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

person vittore    schedule 10.06.2013
comment
это не работает должным образом. он принимает 12.11.11.1p. правильный: ng-pattern='/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25 [0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4] [0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0 -9][0-9]?)$/' - person Jayesh; 18.11.2014
comment
Спасибо @vittore! Кстати, код скрипки необходимо обновить. - person Gene Parcellano; 30.11.2015

arrow_upward
8
arrow_downward

Предполагая, что @Jayesh ответил и сделал некоторые сокращения, в результате получится правильная версия с шаблоном от 0.0.0.0 до 255.255.255.255.

<input type="text"
       id="static_ip"
       name="static_ip"
       placeholder="Static IP"
       ng-model="device.static_ip"
       ng-pattern="/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/"
       ng-model-options="{ updateOn: 'blur' }"
    />

Я добавил ng-model-options, чтобы проверка запускалась только при эффекте размытия, поэтому класс ошибки, если таковой имеется, появляется только после переключения фокуса на другое поле. Однако это работает только для AngularJS 1.3+.

person Valera Tumash    schedule 20.04.2015