angularjs 过滤器 filter 详解——迹忆客-ag捕鱼王app官网

angularjs 过滤器用于修改数据。它是通过在字符表达式或指令中加入竖线（|）来实现的。

下列表列出了常用的过滤器。

uppercase 过滤器

使用管道字符向表达式添加uppercase过滤器。在这里，我们添加了 uppercase 过滤器来将所有学生的姓名转换成大写字母。

enter first name:
enter last name: 
name in upper case: {{student.fullname() | uppercase}}

lowercase 过滤器

使用管道字符向表达式添加 lowercase 过滤器。在这里，我们添加了 lowercase 过滤器来将所有学生的姓名转换成小写字母。

enter first name:
enter last name: 
name in lower case: {{student.fullname() | lowercase}}

currency 过滤器

将 currency 过滤器添加到使用管道字符返回数字的表达式。在这里，我们添加了 currency 过滤器来将费用使用货币格式打印。

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

筛选

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

enter subject: 
subject:

   

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

按过滤器排序

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

subject:

   

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

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
    $scope.msg = "jiyik";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

示例

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

   
      
      
   
   
   
      
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 }}