<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
script
src
=
</
script
>
</
head
>
<
body
ng-controller
=
"MyController"
style
=
"text-align: center"
>
<
h1
style
=
"color: green"
>GeeksforGeeks</
h1
>
<
h3
>
Edit an input value when
it exceeds the limit
</
h3
>
<
input
limit-to
=
"100"
type
=
"number"
ng-model
=
"val"
/><
br
/>
{{text}}
<
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
>