我目前正在嘗試讓輸入值自動洗掉可能出現的某些數字的任何前導 0。例如，在下面的截圖中，我有一個 onchange 函式，它自動將所有數字轉換為整數并將任何負值強制為 0。但是，當嘗試擺脫前導 0 時，輸入框不會改變而存盤的值在 ngModel (number.num) 內部準確地擺脫了前導 0。
angular.module('app1', []) //
.controller('FormCtrl', function($scope) {
$scope.number = {'num': 0};
$scope.numberOnChange = function() {
$scope.number.num = parseInt($scope.number.num.toString(), 10)
console.log($scope.number.num)
if (!$scope.number.num || $scope.number.num < 0) $scope.number.num = 0
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app=app1 ng-controller="FormCtrl">
<form>
<input type=number ng-model="number.num" ng-change="numberOnChange()">
</form>
</div>uj5u.com熱心網友回復：
好像是瀏覽器在添加，不知道怎么控制...
所以嘗試改用指令：將代碼移動到指令，并呈現修改后的值。
嘗試這個：
angular.module('app1', [])
.directive('noLeadingZeroes', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
elm.bind('propertychange keyup paste', function(blurEvent) {
scope.$apply(function() {
const val = ctrl.$viewValue;
console.log('directive val:', val);
let clean = parseInt(val.toString(), 10)
if (!clean || clean < 0) clean = 0
ctrl.$setViewValue(clean);
ctrl.$render();
});
});
}
}
})
.controller('FormCtrl', function($scope) {
$scope.number = {'num': 0 };
$scope.numberOnChange = function() {
console.log('controller val: ', $scope.number.num);
}
});.as-console-wrapper { max-height: 20% !important; bottom: 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app=app1 ng-controller="FormCtrl">
<form>
<input type=number no-leading-zeroes ng-model="number.num" ng-change="numberOnChange()">
</form>
</div>uj5u.com熱心網友回復：
angular.module('app1', []) //
.controller('FormCtrl', function($scope) {
$scope.number = {'num': 0};
$scope.numberOnChange = function() {
$scope.number.num = parseInt($scope.number.num.toString(), 10)
console.log($scope.number.num)
if (!$scope.number.num || $scope.number.num < 0) $scope.number.num = 0
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app=app1 ng-controller="FormCtrl">
<form>
<input type=text ng-model="number.num" ng-change="numberOnChange()">
</form>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/520418.html