AngularJS 中的过滤器是什么？

在本文中，我们将讨论 AngularJS 中的过滤器。可以在 AngularJS 中添加过滤器来格式化数据以显示在 UI 上，而无需更改原始格式。过滤器可以使用管道添加到表达式或指令中 |象征。

{{expression | filterName:parameter }}

AngularJS 过滤器： AngularJS 提供过滤器来转换不同数据类型的数据。下表显示了重要的过滤器：

Filter Name	Description
currency	It is used to convert a number into a currency format.
date	It is used to convert a date into a specified format.
filter	It is used to filter the array and object elements and return the filtered items.
json	To convert a JavaScript object into JSON.
limitTo	It is used to return an array or a string that contains a specified number of elements.
lowercase	It is used to convert a string into lowercase letters.
uppercase	It is used to convert a string into uppercase letters.
number	It is used to convert a number into a string or text.
orderBy	It sorts an array based on specified predicate expressions.

1.货币过滤器：此过滤器用于将数字转换为货币格式。当没有实现货币格式时，货币过滤器使用本地货币格式。

句法：

{{ currency_expression | currency : symbol : fractionSize}}

例子：

HTML

 

    
    

 

    
        Price: {{ price | currency }}
    
 
    
        var app = angular.module("app1", []);
        app.controller("costCtrl", function ($scope) {
            $scope.price = 100;
        });
    
 
     

        This currency filter formats a
        number to a currency format.
    
 

 

输出：

货币过滤器将数字格式化为货币。

2. 日期过滤器：该过滤器用于将日期转换为指定格式。如果未指定日期格式，则默认日期格式为“MMM d, yyyy”。

句法：

{{ date | date : format : timezone }}

例子：

HTML

 

    
    

 

    AngularJS Date Filter
     
    
        Default date: {{person.DOB| date}} 
        Medium date: {{person.DOB| date:'medium'}} 
        Full date: {{person.DOB | date:'fullDate'}} 
        Year: {{person.DOB | date:'yyyy'}} 
    

 

输出：

日期过滤器

3. filter过滤器：这个过滤器用来过滤数组和对象元素，返回一个新的数组。句法：

{{ expression | filter : filter_criteria }}

例子：

HTML

 

    
    

 

    
        
            {{ x }}
        
    
 
    
        angular.module("app1", []).controller(
            "namesCtrl", function ($scope) {
                $scope.names = [
                    "Dhoni",
                    "Virat",
                    "Sachin",
                    "Rohit",
                    "Suresh",
                    "Sehwag",
                    "Zadeja",
                    "Ashwin",
                    "Harbhajan",
                ];
            });
    
 
     

        This example displays only the names
        containing the letter "i".
    
 

 

输出：

过滤器过滤器

4.json过滤器：这个过滤器 用于将 JavaScript 对象转换为 JSON。

句法：

{{ object | json : spacing }}

例子：

HTML

 

    
    

 

    
        Vegetable:
 
        {{vegetable | json : 10}}
    
 
    
        var app = angular.module("vegetable", []);
        app.controller("vegetableCtrl", function ($scope) {
            $scope.vegetable = [
                "Beetroot",
                "Carrot",
                "Potato",
                "Asparagus",
                "Eggplant",
            ];
        });
    

 

输出：

json过滤器。

5.limitTo Filter：这个过滤器 用于返回包含详细元素数量的数组或字符串。它用于字符串和数字。它返回一个只包含指定数量的数字和字符的字符串。

句法：

{{ object | limitTo : limit : begin }}

参数：

limit：指定返回数组或字符串的长度。

开始：指定限制开始的索引。默认情况下，它的值为零。

例子：

HTML

 

    
    

 

    
         

            Displays only the first 3 cars
            because limit is 3 (positive).
        
 
 
        
            {{x}}
        
 
         

            Displays only the last 3 cars
            because limit is -3 (negative).
        
 
 
        
            {{x}}
        
    
 
    
        var app = angular.module("app1", []);
        app.controller("sizeCtrl", function ($scope) {
            $scope.cars = ["Alto", "Breeza",
            "ciaz", "Maruti", "Fortuner", "Verna"];
        });
    

 

输出：

限制过滤。

6.小写：这个过滤器是 用于将字符串转换为小写字母。

句法：

{{expression|lowercase}}

例子：

HTML

 

    
    

 

    AngularJS | lowercase
 
    
        Input:
        
        Output:
        {{string|lowercase}}
    
 
    
        var app = angular.module("app1", []);
        app.controller("lowCtrl", function ($scope) {
            $scope.string = "";
        });
    

 

输出：

小写过滤器。

7. 大写：该过滤器用于将字符串转换为大写字母。

句法：

{{ string | uppercase}}

例子：

HTML

 

    
    

 

    AngularJS | uppercase
    
        Input:
        
        Output:
        {{string|uppercase}}
    
 
    
        var app = angular.module("app1", []);
        app.controller("upCtrl", function ($scope) {
            $scope.string = "";
        });
    

 

输出：

大写过滤器。

8.数字过滤器：这个过滤器 用于将数字转换为字符串或文本。

句法：

{{ string| number : fractionSize}}

例子：

HTML

 

    
    

 

    
        {{value | number : 4}} kg
    
 
    
        var app = angular.module("app1", []);
        app.controller("nCtrl", function ($scope) {
            $scope.value = 34355;
        });
    
 
     
The value is written with three decimals.
 

 

输出：

数字过滤器。

9. orderBy Filter：这个过滤器根据指定的谓词表达式对数组进行排序。

句法：

{{ orderBy_expression | orderBy : expression : reverse }}  

例子：

HTML

 

    
    

 

    AngularJS | orderBy
    
        
            Name (asc)
            Name (dec)
            Phone (asc)
            Phone (dec)
        
        
            {{person.name}} - {{person.phone}}
        
    
     
    
        var myApp = angular.module("app1", []);
        myApp.controller("myController", function ($scope) {
            $scope.persons = [
                { name: "John", phone: "008-452-8276" },
                { name: "Mahira", phone: "879-303-3345" },
                { name: "Minakshi", phone: "545-474-4351" },
                { name: "Billa", phone: "545-788-5678" },
                { name: "vanya", phone: "463-494-8705" },
                { name: "Rashi", phone: "315-315-5698" },
            ];
            $scope.SortOrder = "+name";
        });
    

 

输出：

orderBy 过滤器。