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

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

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

  

    
    

  

    
        
            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();
                                }
                            });
                        });
                    }
                }
            }]);