La tarea es manejar un campo de entrada si el número ingresado por el usuario en la entrada excede algún límite usando angularJS. Definimos una directiva limitTo y la usamos en un elemento de entrada HTML. Esta directiva se utiliza para todo el manejo de los límites de desbordamiento. La directiva llama a una función en el evento de pulsación de tecla donde podemos verificar los límites.
Ejemplo 1: este ejemplo establece el valor de la entrada del usuario en 0 si su límite supera los 100.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Edit an input value when
it exceeds the limit
</b>
<br><br>
<!-- Custom directive limit-to -->
<input limit-to="100"
type="number"
ng-model="val">
{{val}}
</center>
<script type="text/javascript">
angular.module('myApp', [])
.controller('MyController',
['$scope', function($scope) {
// Value to ng model the input
$scope.val;
}])
.directive("limitTo", ['$timeout', function($timeout) {
// Declaration of custom directive
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
elem.on("keypress", function(e) {
$timeout(function() {
if (parseInt(e.target.value) > limit)
{
// Handle change here
scope.val = 0;
scope.$apply();
e.preventDefault();
}
});
});
}
}
}]);
</script>
</body>
</html>
Salida: Tan pronto como el usuario supera los 100, el valor vuelve a establecerse en 0.
Ejemplo 2: Aquí cambiamos el texto según el límite de entrada. Si el valor de la entrada es inferior a 0, pasa a 0. Si su valor es superior a 100, pasa a 100; de lo contrario, permanece como está.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Edit an input value when it exceeds the limit
</b>
<br><br>
<!-- Custom directive limit-to -->
<input limit-to="100" type="number" ng-model="val">
<br> {{text}}
</center>
<script type="text/javascript">
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
// Value to ng model the input
$scope.val;
$scope.text = 'Inside Limit';
}])
.directive("limitTo", ['$timeout', function($timeout) {
// Declaration of custom directive
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
elem.on("keypress", function(e) {
$timeout(function() {
if (parseInt(e.target.value) > limit) {
// Handle change here if greater
scope.text = "Outside limit (greater)";
scope.val = 100;
scope.$apply();
e.preventDefault();
} else if (parseInt(e.target.value) < 0) {
scope.text = "Outside limit (smaller)";
scope.val = 0
scope.$apply();
e.preventDefault();
} else {
scope.text = "Inside Limit";
scope.$apply();
e.preventDefault();
}
});
});
}
}
}]);
</script>
</body>
</html>
