当使用 AngularJS 超出限制时如何重置输入值？

如果用户在输入中输入的数字超过使用 angularJS 的某个限制，则任务是处理输入字段。我们定义了一个limitTo指令并在 HTML 输入元素上使用它。该指令用于所有溢出限制的处理。该指令在按键事件上调用一个函数，我们可以在其中检查限制。

示例 1：本示例将用户输入的值设置为 0，如果其限制超过 100。

  

    
    

  

    
        
            GeeksforGeeks
        
        
            Edit an input value when
            it exceeds the limit
        
        
  
        
         
        {{val}}
    
      
    
        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();
                                }
                            });
                        });
                    }
                }
            }]);
    

  

输出：一旦用户超过 100，该值就会被设置回 0。

示例 2：这里我们根据输入限制更改文本。如果输入的值小于 0，则它变为 0。如果它的值大于 100，则它变为 100，否则它保持原样。

  

    
    

  

    
        
          GeeksforGeeks
        
        
          Edit an input value when it exceeds the limit
        
        
          
        
        
         {{text}}
    
    
        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();
                                }
                            });
                        });
                    }
                }
            }]);