📌  相关文章
📜  AngularJS-过滤器

📅  最后修改于: 2020-10-27 02:49:53             🧑  作者: Mango

过滤器用于修改数据。可以使用管道（|）字符将它们组合在表达式或指令中。以下列表显示了常用的过滤器。

Sr.No. Name & Description
1

uppercase

converts a text to upper case text.
2

lowercase

converts a text to lower case text.
3

currency

formats text in a currency format.
4

filter

filter the array to a subset of it based on provided criteria.
5

orderby

orders the array based on provided criteria.

大写过滤器

使用管道字符将大写过滤器添加到表达式中。在这里，我们添加了大写过滤器，以所有大写字母打印学生姓名。

Enter first name:
Enter last name: 
Name in Upper Case: {{student.fullName() | uppercase}}

小写过滤器

使用管道字符将小写过滤器添加到表达式中。在这里，我们添加了小写过滤器，以所有小写字母打印学生姓名。

Enter first name:
Enter last name: 
Name in Lower Case: {{student.fullName() | lowercase}}

货币过滤器

使用竖线字符将货币过滤器添加到表达式返回数字中。在这里，我们添加了货币过滤器以使用货币格式打印费用。

Enter fees: 
fees: {{student.fees | currency}}

过滤

要仅显示必需的主题，我们使用subjectName作为过滤器。

Enter subject: 
Subject:

    
   
  • 
      {{ subject.name + ', marks:' + subject.marks }}
   
    •

按订单排序

要按标记对主题进行排序，我们使用orderBy标记。

Subject:

    
   
  • 
      {{ subject.name + ', marks:' + subject.marks }}
   
    •

例

以下示例显示了上述所有过滤器的使用。

testAngularJS.htm

现场演示
Angular JS Filters
      
   
   
   
      
AngularJS Sample Application

      
      

         

            

               Enter first name:
               
            

            

               Enter last name: 
               
            

            

               Enter fees: 
               
            

            

               Enter subject: 
               
            

         

         

         
         

            

               Name in Upper Case: {{student.fullName() | uppercase}}
            

            

               Name in Lower Case: {{student.fullName() | lowercase}}
            

            

               fees: {{student.fees | currency}}
               
            

            

               Subject:
               
                  
    
                     
  • 
                        {{ subject.name + ', marks:' + subject.marks }}
                     
    •

输出

在网络浏览器中打开文件testAngularJS.htm 。查看结果。