IP address mask for AngularJS

Question

Does anyone know the ip mask mask plugin for AngularJS?

Since I tried to use "jQuery Input IP Address Control", but it does not work. When I try to use it, the attribute "ngModel" does not get the value of the text field. On the screen, I see the value inside the text box, however, if I do ".value ()" in the element, it returns the value "". The same thing happens when I see the value of the $ scope element using console.log ().

Can anybody help me?

Thank!

Edit: SOLVED

People, the problem is solved.

I used this directive available in 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 Plugin . , ngNodel element.val(). , element.text().

Answer 1

, . [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-pattern)

• , , [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

Answer 2

, @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 +