AngularJS |过滤器

AngularJS中的“过滤器”过滤器用于过滤数组和对象元素并返回过滤后的项目。换句话说，此过滤器从原始数组中选择一个数组的子集(包含满足过滤条件的元素的较小数组)。

句法：

{{ arrayexpression | filter : expression : comparator : anyPropertyKey }}

范围：

• arrayexpression：将在其上应用过滤器的源数组。
• expression：满足过滤条件后，用于从数组中选择项目。
• 比较器：用于通过比较过滤表达式中的期望值和对象数组中的实际值来确定值。
• anyPropertyKey：这是一个特殊属性，用于将值与给定属性进行匹配。其默认值为$。

范例1：

  

    AngularJS | filter Filter
      
    
    

  

  
    
  
        GeeksforGeeks
  
        
            
                
                    {{ x }}
                
            
        
    
  
    
        angular.module('myApp', []).controller(
                    'namesCtrl', function($scope) {
            $scope.names = [
                'Jani',
                'Carl',
                'Margareth',
                'Hege Mathew',
                'Joey Tribiani',
                'Gustav',
                'Birgit',
                'Mary',
                'Kai'
            ];
        });
    
  
    
        This example displays the names
        containing the character "e"(filter)
    

  
                    

输出：

示例2：本示例使用一个对象来过滤其元素。

  

    AngularJS | filter Filter
      
    
    

  

    
   
        GeeksforGeeks
   
        
            
                {{x.name + ", " + x.city}}
            
        
    
      
   
    
        var app = angular.module('myApp', []);
      
        app.controller('arrCtrl', function($scope) {
            $scope.customers = [{
                "name": "Chocolate Shake",
                "city": "Patna"
            }, {
                "name": "Hot Chocolate",
                "city": "Delhi"
            }, {
                "name": "Milk",
                "city": "Patna"
            }, {
                "name": "Coffee",
                "city": "Patna"
            }, {
                "name": "Tea",
                "city": "Pune"
            }, {
                "name": "Mineral Water",
                "city": "Mumbai"
            }, {
                "name": "Iced Tea",
                "city": "Bangalore"
            }];
        });
    
   
    
        The filter will give a match if there is
        an "e" character in the name, and the city
        is "Patna". Milk wasn't matched because
        the alphabet 'e' is not present.
    
  

                    

输出：

示例3：在此示例中，我们将看到“严格” caparison，除非完全匹配，否则它不会返回任何值。

  

    AngularJS | filter Filter
      
    
    

  

   
    
        GeeksforGeeks
          
        
            
              {{x.name + ", " + x.city}}
            
        
    
   
    
        var app = angular.module('myApp', []);
          
        app.controller('arrCtrl', function($scope) {
            $scope.customers = [{
                    "name": "Mumbai Food",
                    "city": "Chinchwad"
                }, {
                    "name": "Gurgaon Catering",
                    "city": "Haryana City"
                }, {
                    "name": "Noida temperature",
                    "city": " Chinchwad"
                },
   
            ];
        });
    
   
    The filter will give a match for the array item(s) 
       where one or more object values are "Chinchwad".
   

                    

输出：

注意：如果您注意到数组中的最后一个Chinchwad不包括在列表中，因为最后一个Chinchwad在其自身之前包含一个空格。