Question

是否有人知道AngularJS的IP地址掩码插件？

因为我试图使用“Jquery输入IP地址控件”，但它不起作用。当我尝试使用它时，“ngModel”属性不会获得文本字段的值。在屏幕中我可以看到文本字段内的值，但是，如果我在元素中执行“.value（）”，则返回“”值。当我通过使用console.log（）看到$ scope元素的值时，会发生同样的事情。

任何人都可以帮助我吗？

谢谢！

修改：已解决

人，问题解决了。

我在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（）。

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>

几点说明：

评论者向正则表达式添加^和$量词。您不需要这样做，因为角度在ng-pattern指令（see angular.js source code for 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 +

AngularJS的IP地址掩码

2 个答案: