3

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

因为我尝试使用“Jquery Input IP Address Control”，但它不起作用。当我尝试使用它时，“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()。

4

2 回答 2

8

我只是想知道你为什么首先需要这个。只使用[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指令中为您添加它们（请参阅 ng-pattern 的 angular.js 源代码）

  • 我不相信正则表达式很适合检查每个数字是否在 [0,255] 范围内。我宁愿做的是ngModelController直接使用 ng-ipaddress 指令。（参见 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

于 2013-06-10T17:46:33.670 回答
8

假设@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+

于 2015-04-20T03:42:11.740 回答