AngularJS过滤器以及自定义过滤器

Bertha 。 2021-09-14 06:54 470阅读 0赞

过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。

# 一.AngularJS的filter过滤器 #

向表达式添加过滤器：可以通过一个管道字符(“|”)和一个过滤器添加到表达式中,可以使用多个过滤器，用管道字符(“|”)隔开就好。

## 1.uppercase|lowercase:大小写转换过滤 ##

\{ \{ youname | uppercase \}\}  
\{ \{ youname | lowercase \}\}

## 2.json:json格式过滤 ##

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。  
这个过滤器对调试相当有用  
eg：\{ \{ \{"name":"dreamapple","language":"AngularJS"\} | json\}\}  
返回结果为：\{ "name": "dreamapple", "language": "AngularJS" \}

## 3.date:日期格式过滤 ##

yyyy--表示年份； MM--月份（必须大写）；  
dd--日期；hh--时； mm--分（必须小写）；  
ss--秒；EEEE--星期；hh:mm--形式是24小时制；h:mma--12小时制

eg：\{ \{1288323623006| date:'yyyy-MM-dd HH:mm:ss'\}\}

\----2010-10-29 11:40:23

##    4.number:数字格式过滤 ##

number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定小float型保留几位小数

\{ \{数字 |number:保留几位小数\}\}

eg:

\{ \{1.2345678 |number:1\}\}-----//1.2

## 5.limitTo:字符串截取(限制数组长度或字符串长度) ##

从1开始数，其中字符串中间的空格也算。limitTo的正负表示字符串从左开始还是从右开始算起。

\{ \{ "i love tank" | limitTo:6 \}\}--------//i love  
 \{ \{ "i love tank" | limitTo:-6 \}\}-------//e tank

## 6.currency:货币格式过滤 ##

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

## 7.过滤器的过滤器filter:查找 ##

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

用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> </head> <body> <div ng-app="myApp"> <div ng-controller="namesFilterController"> <p>filter 匹配子串(以下写法只是方便观察)</p> <ul> <li>{ { webArr | filter : 'n' }} </li> <li>{ { webArr | filter : 25 }} </li> <li>{ { webArr | filter : {name : 'z'} }}</li> <li>{ { webArr | filter : fun }} </li> </ul> </div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script> var myApp=angular.module('myApp',[]); myApp.controller('namesFilterController',function($scope){ $scope.webArr = [ {name:'nick',age:25}, {name:'ljy',age:28}, {name:'xzl',age:28}, {name:'zyh',age:30} ]; $scope.fun = function(e){return e.age>13;}; }); </script> </body> </html>

![20171011134856371][]

## 8.orderBy:对象排序 ##

要通过标记排序主题，我们使用orderBy标记。ng-repeat生成一个独立的scope作用域，直接在ng-repeat循环后加管道orderBy排序。

<ul>    
                <li ng-repeat="x in names | orderBy:'name'">    
                    \{ \{ x.name + ', ' + x.country \}\}    
                </li>    
            </ul>----//这是升序

如果在加个“true”时，则排序的顺序是降序，没有的话，顺序是升序（从小到大）。

<ul>    
                <li ng-repeat="x in names | orderBy:'name':true">    
                    \{ \{ x.name + ', ' + x.country \}\}    
                </li>    
            </ul>------//这是降序

eg:

{ { [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }}

总体的例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> </head> <body> <div ng-app="myApp"> <p>1.将字符串转换为大小写：</p> <div ng-controller="caseController"> <p>{ {youname}}姓名为转换大写 { { youname | uppercase }}</p> <p>{ {youname}}姓名为转换小写 { { youname | lowercase }}</p> </div> <p>2.货币过滤：</p> <div ng-controller="costController"> 数量：<input type="number" ng-model="quantity"> 价格：<input type="number" ng-model="price"> <p>总价 = { { (quantity * price) | currency }}</p> { {250 |currency:"RMB ￥"}} </div> <div ng-controller="namesController"> <p>3.按name顺序排序对象：</p> <ul> <li ng-repeat="x in names | orderBy:'name':true"> { { x.name + ', ' + x.country }} </li> </ul> <p>4.json格式过滤:{ {jsonText | json}}</p> <p>5.date格式过滤1288323623006：{ {1288323623006| date:'yyyy-MM-dd HH:mm:ss'}}</p> <p>6.number格式过滤1.2345678：{ {1.2345678 |number:2}}</p> <p>7.字符串截取i love tank： { { "i love tank" | limitTo:6 }}<br/>最后6位: { { "i love tank" | limitTo:-6 }}</p> </div> <p>8.过滤器的过滤器filter：</p> <div ng-controller="namesFilterController"> <ul> <li ng-repeat="x in names | orderBy:'age':true"> { { (x.name | uppercase) + ', ' + x.age }} </li> </ul> <p>输入过滤：<input type="text" ng-model="name"></p> <p>通过name筛选的结果：</p> <ul> <li ng-repeat="x in names | filter:name| orderBy:'age':true"> { { (x.name | uppercase) + ', ' + x.age }} </li> </ul> </div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script> var myApp=angular.module('myApp',[]); //1.将字符串转换为大小写 myApp.controller('caseController',function($scope){ $scope.youname= "Doe"; }); //2.货币过滤 myApp.controller('costController',function($scope){ $scope.quantity = 1; $scope.price = 9.99; }); //3.按name顺序排序对象 myApp.controller('namesController',function($scope){ $scope.names = [ {name:'1',country:'Norway'}, {name:'3',country:'Sweden'}, {name:'2',country:'Denmark'} ]; $scope.jsonText={foo:"bar",baz:23}; }); //3.通过名字来过滤 myApp.controller('namesFilterController',function($scope){ $scope.names = [ {name:'小小春',age:'11'}, {name:'穆木兰',age:'16'}, {name:'小莲蓬',age:'13'} ]; }); </script> </body> </html>

# 二.AngularJs的控制器使用filter #

myApp.controller('firstCtrl',function($scope,$filter)\{

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> </head> <body> <div ng-app="myApp"> <div ng-controller="firstCtrl"> <P>过滤前的：{ {firstName}}有{ {price}}钱</p> <p>过滤后的：{ {uFirstName}}有{ {cPrice}}钱 </p> </div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script> var myApp=angular.module('myApp',[]); myApp.controller('firstCtrl',function($scope,$filter){ $scope.firstName="James"; $scope.uFirstName=$filter('uppercase')($scope.firstName); $scope.price="121212"; $scope.cPrice=$filter('currency')($scope.price,'￥'); }) </script> </body> </html>

![20171011141604443][]

# 三.AngularJs自定义filter过滤器 #

## 1.首先创建模块myAppModule ##

var myAppModule=angular.module('myApp',\[\]);

## 2.创建过滤器 ##

myAppModule.filter("addUpperCase",function()\{  
              
\});

其中addUpperCase是过滤器的名字，后面跟着过滤器的方法声明，

## 3.补充方法 ##

在过滤器方法中返回另一个方法

myAppModule.filter("addUpperCase",function()\{  
        return function(input,uppercase)\{  
            var out = "";  
            for(var i=0 ; i<input.length; i++)\{  
                out = out+input.charAt(i);  
               //charAt() 方法可返回指定位置的字符  
            \}  
            //toUpperCase() 方法用于把字符串转换为大写  
            return out.toUpperCase();  
        \}  
    \});

内部返回的方法包含了两个参数，一个是输入的值，就是我们过滤器接受的值。则input就是其中name代表的值（$scope.name = "xiao gao";）,后面的参数是可选的。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> </head> <body ng-app="myApp"> <div ng-controller="myAppCtrl"> 原本name: { { name }}<br> 自定义转换大写过滤器后name: { { name | addUpperCase}} </div> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> var myAppModule =angular.module('myApp',[]); myAppModule.controller("myAppCtrl",["$scope",function($scope){ $scope.name = "xiao gao"; }]); myAppModule.filter("addUpperCase",function(){ return function(input,uppercase){ var out = ""; for(var i=0 ; i<input.length; i++){ out = out+input.charAt(i); //charAt() 方法可返回指定位置的字符 } //toUpperCase() 方法用于把字符串转换为大写 return out.toUpperCase(); } }); </script> </body> </html>

![20171011161333331][]

[20171011134856371]: /images/20210813/e61c3c7a4d4c4aec93297fc0b63c4fe8.png
[20171011141604443]: /images/20210813/c27999c2d89c49c982970bc90f760e46.png
[20171011161333331]: /images/20210813/a6a03688cd4145db9b3a7a3ae9efebd6.png