javascript - AngularJS 的 IP 地址掩码

Question

有人知道 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 插件工作正常。可能是因为现在 ngNode 正在获取 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 指令(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