angularjs自定义过滤器

妖狐艹你老母 2022-07-15 11:45 263阅读 0赞

**AngularJS一大特点就是提供了过滤器，可以通过操作UNIX下管道的方式，操作数据结果。**

通过使用管道，可以便于双向的数据绑定中视图的展现。  
  
过滤器在处理过程中，将数据变成新的格式，而且可以使用管道这种链式风格，还能接受附加的参数。  
  
实现方式  
  
下面看一下如何定义声明一个过滤器，首先依然是要创建我们自己的模块myAppModule  
  
var myAppModule = angular.module("myApp",\[\]);  
　　接下来在模块的基础上，创建过滤器：  
  
myAppModule.filter("reverse",function()\{  
              
\});

**其中reverse是过滤器的名字，后面跟着过滤器的方法声明，在方法中返回另一个方法：  
  
myAppModule.filter("reverse",function()\{  
                return function()\{  
                
                \}  
            \});  
  
　程序样例**

**<!doctype html>  
<html ng-app="myApp">  
    <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>  
    </head>  
    <body>  
  
  
        <div ng-controller="myAppCtrl">  
            name:\{ \{ name \}\}<br>  
            reverse name:\{ \{ name | reverse \}\}<br>  
            reverse&uppercase name:\{ \{ name | reverse:true \}\}  
        </div>  
        <script type="text/javascript">  
            var myAppModule = angular.module("myApp",\[\]);  
  
  
            myAppModule.controller("myAppCtrl",\["$scope",function($scope)\{  
                $scope.name = "xingoo";  
            \}\]);  
  
  
            myAppModule.filter("reverse",function()\{  
                return function(input,uppercase)\{  
                    var out = "";  
                    for(var i=0 ; i<input.length; i++)\{  
                        out = input.charAt(i)+out;  
                    \}  
                    if(uppercase)\{  
                        out = out.toUpperCase();  
                    \}  
                    return out;  
                \}  
            \});  
        </script>  
    </body>  
</html>**