如何使用AngularJS根据ng-model过滤ng-repeat值？

可以使用AngularJS中的ng-model过滤ng-repeat值，方法是使用输入字段的值作为过滤器中的表达式。我们可以在输入字段上设置ng-model指令以过滤ng-repeat值。

以下示例说明了该方法：
示例1：根据ng-model过滤输入文本ng-repeat值。此过滤器将仅显示匹配城市的名称

  

    
    

  

    
        GeeksforGeeks
        Filter ng-reapet values according to ng-model
    
    
  
        Type a city name in the input field:
  
        
            
        
        Filter show the names of only the matching city.
  
        
            
                {{ x }}
            
        
  
    
  
    
        angular.module('app1', []).controller('controller1', function($scope) {
            $scope.citynames = [
                'Ahmedabad',
                'Ajmer',
                'Bhopal',
                'Jaipur',
                'Surat',
                'Nagpur',
                'Mumbai',
                'Pune',
                'Indore',
                'Udaipur',
                'Jodhpur',
                'Jabalpur',
                'Gwalior',
                'Delhi',
                'Lucknow',
                'Banglore'
            ];
        });
    
  

  

输出：

示例2：根据ng-model过滤输入文本ng-repeat值。通过应用过滤器将每种语言大写之后，此过滤器将仅显示匹配的编程语言的名称。

    
    

  

    
        GeeksforGeeks
        Filtering input text ng-repeat values according to ng-model
    
    
  
        Type a programming language name in the input field:
  
        
            
        
        
          Filter shows the names of only the matching programming language
          after capitalizing each language by applying filter.
        
  
        
            
                {{ x |myfilter}}
            
        
  
    
  
    
        var app = angular.module('app1', []);
        app.filter('myfilter', function() {
            return function(x) {
                var i, c, txt = "";
                for (i = 0; i < x.length; i++) {
                    c = x[i];
  
                    c = c.toUpperCase();
  
                    txt += c;
                }
                return txt;
            };
        });
        app.controller('controller1', function($scope) {
            $scope.programminglanguagenames = [
                'cobol',
                'pascal',
                'ruby',
                'php',
                'perl',
                'python',
                'c',
                'c++',
                'java',
                'html',
                'css',
                'javascript',
                'basic',
                'lisp',
                'smalltalk',
                'bootstrap'
            ];
        });
    
  

  

输出：