我正在創建一個指令，我可以選擇小數位的長度，並且只接受一個逗號或點，但是我正面臨着實現完美正則表達式的問題。限制指令中的小數位
我代碼：
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;
});
實際上，正則表達式是不是讓我插入點或逗號，也允許鍵入比小數的極限。
OK，你在正則表達式一個非常小的問題（你必須先「[」後的字符串錨（^）開始），而你不檢查逗號......
/^[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/的奇妙工具。它有一個非常直觀的界面，似乎處理溢出特別好。
問題是，會考慮代碼示例的其餘部分：var clean = val.replace（/[^0-9]+([.[0-9]{1,2})?$/g，'' ）;我有這個能夠清理無效的所有東西，這樣用戶只能插入有效值 –
@MarcoPereira我所做的改變應該使它適用於你需要的工作 –
它不工作，當我繼續輸入輸入當插入點時，它被清除。 –
您可以使用此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>但是給了我一個錯誤在attrs。allowDecimal ==「false」，當我使用例如，它給我一個錯誤$ rootScope：infdig無限$ digest循環 –
我現在看到了，但你說你想限制小數位，對吧？爲什麼你需要去掉小數？ – developer033
，因爲是來自項目經理和客戶的要求：S，他們不希望用戶能夠插入任何點/逗號，小數，以減少錯誤 –
你的正則表達式是沒有意義的。它刪除幾乎所有的東西，除了數字和/或點+ 1到2的數字在最後。在示例之前/之後顯示一些 – sln
由於不理解代碼，當然不刪除數字...，我想要刪除不是數字，點或逗號的任何東西 –
爲什麼不使用此指令？ https://github.com/nitishkumarsingh13/Angularjs-Directive-Accept-Number-Only – developer033