2016-07-13 3 views
1

Я создаю директиву, где я могу выбрать длину десятичных знаков, и принимать только одну запятую или точку, но я столкнулся с проблемами для достижения идеального регулярного выражения ,Предельные десятичные разряды в директиве

Мой код:

var decimalLenght = 2; 

ngModelCtrl.$parsers.push(function(val) { 
    if (angular.isUndefined(val)) { 
    var val = ''; 
    } 
    var clean = val.replace(/[^0-9]+(\.[0-9]{1,2})?$/g, ''); 
    if (val !== clean) { 
    ngModelCtrl.$setViewValue(clean); 
    ngModelCtrl.$render(); 
    } 
    return clean; 
}); 

Собственно регулярное выражение не давая мне вставить точки или запятой, а также позволяет вводить более чем предел знаков после запятой.

+0

Ваше регулярное выражение не имеет смысла. Он удаляет почти все, кроме чисел и/или точек + от 1 до 2 чисел в конце. Показывать некоторые примеры до/после – sln

+0

Это doenst имеет смысл, потому что не понимает код, конечно, не удаляет числа ..., я хочу удалить все, что не является числом, точками или комами –

+0

Почему вы не использовали эту директиву? https://github.com/nitishkumarsingh13/Angularjs-Directive-Accept-Number-Only – developer033

ответ

0

КИ, у вас есть очень небольшая проблема в регулярном выражении (Вы имели начало строки якоря (^) после первого «[»), и вы не проверяли запятую ...

/^[0-9]+([.,][0-9]{1,2})?$/g 

Оттуда, так как он должен быть динамичным, лучше было бы сделать

new RegExp("^[0-9]+([.,][0-9]{1," + decimalLength + "})?$", "g"); 

с учетом этих изменений, и изменения проверки логики, вы должны получить что-то вроде

var decimalLenght = 2; 

ngModelCtrl.$parsers.push(function(val) { 
    if (angular.isUndefined(val)) { 
     val = ''; 
    } 

    var check = new RegExp("^[0-9]+([.,][0-9]{1," + decimalLength + "})?$","g"); 
    if (check.test(val)) { 
     return val; 
    } else { 
     ngModelCtrl.$setViewValue(''); 
     ngModelCtrl.$render(); 
     return ''; 
    } 
}); 

Вот фантастический инструмент, который я использую для проверки своих регулярных выражений http://www.regexr.com/. Он имеет очень интуитивно понятный интерфейс и, похоже, отлично справляется с этим.

+0

Проблема заключается в том, что будет отражать остальную часть примера кода: var clean = val.replace (/[^0-9]+(\.[0-9]{1,2})?$/g, ''); У меня есть возможность очистить все, что недействительно, таким образом, пользователь может вставлять только допустимые значения. –

+0

@MarcoPereira. Изменения, которые я сделал, должны заставить его работать за то, что вам нужно. –

+0

Не работает, когда я продолжаю вводить ввод и при вставке точки он очищается. –

0

Вы можете использовать этот directive и задать вход соответствующим вашим требованиям.

Вот сниппет продемонстрировать это:

angular.module('app', []) 
 
    .controller('mainCtrl', function($scope) { 
 
    $scope.options = []; 
 
    for (var i = 1; i <= 10; i++) { 
 
     $scope.options.push(i); 
 
    } 
 
    }) 
 
    .directive('nksOnlyNumber', function() { 
 
    return { 
 
     restrict: 'EA', 
 
     require: 'ngModel', 
 
     link: function(scope, element, attrs, ngModel) { 
 
     scope.$watch(attrs.ngModel, function(newValue, oldValue) { 
 
      if (newValue) { 
 
      var spiltArray = String(newValue).split(""); 
 

 
      if (attrs.allowNegative == "false") { 
 
       if (spiltArray[0] == '-') { 
 
       newValue = newValue.replace("-", ""); 
 
       ngModel.$setViewValue(newValue); 
 
       ngModel.$render(); 
 
       } 
 
      } 
 

 
      if (attrs.allowDecimal == "false") { 
 
       newValue = parseInt(newValue); 
 
       ngModel.$setViewValue(newValue); 
 
       ngModel.$render(); 
 
      } 
 

 
      if (attrs.allowDecimal != "false") { 
 
       if (attrs.decimalUpto) { 
 
       var n = String(newValue).split("."); 
 
       if (n[1]) { 
 
        var n2 = n[1].slice(0, attrs.decimalUpto); 
 
        newValue = [n[0], n2].join("."); 
 
        ngModel.$setViewValue(newValue); 
 
        ngModel.$render(); 
 
       } 
 
       } 
 
      } 
 

 
      if (spiltArray.length === 0) return; 
 
      if (spiltArray.length === 1 && (spiltArray[0] == '-' || spiltArray[0] === '.')) return; 
 
      if (spiltArray.length === 2 && newValue === '-.') return; 
 

 
      /*Check it is number or not.*/ 
 
      if (isNaN(newValue)) { 
 
       ngModel.$setViewValue(oldValue || ''); 
 
       ngModel.$render(); 
 
      } 
 
      } 
 
     }); 
 
     } 
 
    }; 
 
    });
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <form name="form"> 
 
    <label for="option">Decimal place: </label> 
 
    <select id="option" ng-options="option for option in options" ng-model="option"> 
 
     <option value="">Select the length</option> 
 
    </select> 
 
    <hr> 
 
    <label for="input">Input with decimals: </label> 
 
    <input type="text" id="input" nks-only-number ng-model="input" decimal-upto="{{option}}" required> 
 
    <br> 
 
    <label for="input2">Input without decimals: </label> 
 
    <input type="text" id="input2" nks-only-number ng-model="input2" allow-decimal="false"> 
 
    </form> 
 
</body> 
 

 
</html>

+0

Но дает мне ошибку в attrs.allowDecimal == "false", когда я использую например , это дает мне ошибку $ rootScope: infdig Infinite $ digest Loop –

+0

Я видел это сейчас, но вы сказали, что хотите ограничить десятичные знаки, не так ли? Зачем вам нужно дезактивировать десятичные знаки? – developer033

+0

, потому что это требования от менеджера проекта и клиента: S, они не хотят, чтобы пользователь мог вставлять любые точки/запятые, десятичные числа, за меньшие ошибки –

Смежные вопросы