7 过滤器

曾经终败给现在 2022-05-26 00:29 133阅读 0赞

# 过滤器 #

过滤器的主要功能是格式化数据.

## 在模板中使用过滤器 ##

过滤器可以应用在视图模板中的表达式中，按如下的格式：

`{ { 表达式 | 过滤器名 }}`

过滤器可以应用在另外一个过滤器的结果之上。这叫做“链式”使用，按如下格式：

`{ { 表达式 | 过滤器1 | 过滤器2 |...}}`

过滤器可以拥有（多个）参数，按如下格式：

`{ { 表达式 | 过滤器:参数1:参数2:...}}`

## 过滤器示例 ##

**uppercase，lowercase 大小写转换**

{
       { "lower cap string" | uppercase }} // 结果：LOWER CAP STRING
    {
       { "TANK is GOOD" | lowercase }} // 结果：tank is good

**date 格式化**

语法：`{ { date_expression | date : format}}`

{
       {
       1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

**number 格式化（保留小数）**

语法：`{ { number_expression | number : fractionSize}}`

如果输入不是一个数字，返回空字符串。

{
       {
       149016.1945000 | number:2}} //149016.19

**currency货币格式化**

格式化数字为货币格式，默认是美元符号。

语法：`{ { currency_expression | currency : symbol}}`

{
       { 250 | currency }} // 结果：$250.00
    {
       { 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00

**limitTo 截取**

limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取；如果传入的长度值大于被操作数组或字符串的长度，那么整个数组或字符串都会被返回。

语法：`{ { limitTo_expression | limitTo : limit}}`

{
       {
       "1234567890" | limitTo :6}} // 从前面开始截取6位
    {
       {
       "1234567890" | limitTo:-4}} // 从后面开始截取4位

**json(格式化json对象)**

json过滤器可以把一个js对象格式化为json字符串，没有参数。

语法：`{ { json_expression | json}}`

**orderBy 排序**

根据某个表达式排列数组。

语法：`{ { orderBy_expression | orderBy : expression : reverse}}`

默认排序为升序，在expression属性名前添加”-“符号后，则变为降序。

*expression*参数可以是一个字符串，表示以该属性名称进行排序；可以是一个函数，定义排序属性；还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

// 根id降序排
    {
       { [{
       "age": 20,"id": 10,"name": "iphone"},
    {
       "age": 12,"id": 11,"name": "sunm xing"},
    {
       "age": 44,"id": 12,"name": "test abc"}
    ] | orderBy:'id':true }}
    // 根据id升序排
    {
       { [{
       "age": 20,"id": 10,"name": "iphone"},
    {
       "age": 12,"id": 11,"name": "sunm xing"},
    {
       "age": 44,"id": 12,"name": "test abc"}
    ] | orderBy:'id' }}
    // 根id降序排
    {
       { [{
       "age": 20,"id": 10,"name": "iphone"},
    {
       "age": 12,"id": 11,"name": "sunm xing"},
    {
       "age": 44,"id": 12,"name": "test abc"}
    ] | orderBy:'-id' }}

$scope.childrenArray = [
    {name:'kimi',age:3},
    {name:'cindy',age:4},
    {name:'anglar',age:4},
    {name:'shitou',age:6},
    {name:'tiantian',age:5}
    ];
    
    {
       { childrenArray | orderBy : 'age' }} //按age属性值进行排序，若是-age，则倒序
    {
       { childrenArray | orderBy : orderFunc }}//按照函数的返回值进行排序
    {
       { childrenArray | orderBy : ['age','name'] }}//如果age相同，按照name进行排序

**filter查找**

filter过滤器从数组中选择一个子集。

filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索，还可以使用函数过滤不符合要求的数据。

语法：`{ { filter_expression | filter : expression : comparator}}`

*  expression 参数

*expression*参数可以是字符串、对象或是一个用来从数组中选择元素的函数。

(1) 字符串

返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加!符号。

(2) 对象

AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比，可以将$当作键名。

(3) 函数

对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。

$scope.childrenArray = [
    {name:'kimi',age:3},
    {name:'cindy',age:4},
    {name:'anglar',age:4},
    {name:'shitou',age:6},
    {name:'tiantian',age:5}
    ];
    $scope.func = function(e){ return e.age>4;}
    
    {
       { childrenArray | filter : 'a' }} //匹配属性值中含有a的
    {
       { childrenArray | filter : 4 }} //匹配属性值中含有4的
    {
       { childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的
    {
       {childrenArray | filter : func }} //参数是函数，指定返回age>4的

*  comparator 参数

*comparator*参数可以是以下三种情况之一:

(1) true

用angular.equals(expected, actual)对两个值进行严格比较。

(2) false

进行区分大小写的子字符串比较。

(3) 函数

运行这个函数，如果返回真值就接受这个元素。

下面的例子返回比1大的数据：

<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
    <li ng-repeat="item in numbers | filter:1:comparator">
    {
       { item }}
    </li>
    </ul>
    </div>
    
    <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.numbers=[1,-1,8,0,-9,9]; $scope.comparator = function (source,target) { return source > target; }; }); </script>

## 在控制器和服务中使用过滤器 ##

你同样可以在控制器和服务中使用过滤器。

你可以通过添加`$filter`依赖，来使用 `$filter` 服务过滤数据：

`变量 = $filter("过滤器名称")（被过滤数据，过滤条件1，过滤条件2，..）`

$scope.name = $filter('date')('236478234','hh');
    $scope.name = $filter('uppercase')('hello');

你也可以通过在控制器和服务中添加自定义的过滤器的依赖，使用方法与上相同。

## Module.filter自定义过滤器 ##

定义格式：

模块名称.filter('过滤器名字'，function(){ 
    return function(被过滤数据，条件1，条件2...){ 
    //过滤操作
    }
    });
    
    angular.module("x",[]).filter("filterName",["dependancy",function(dependancy){ 
    return function(value){ 
    　　//your code return the data which passed filter（返回过滤后的数据）
    　　};
    }]);

示例：

<html ng-app="MyReverseModule">
    <head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller="Ctrl">
    <input ng-model="greeting" type="text"><br>
    未添加过滤器: {
       {greeting}}<br>
    逆置: {
       {greeting|reverse}}<br>
    逆置 + 大写: {
       {greeting|reverse:true}}<br>
    </div>
    </body>
    </html>

angular.module('myReverseFilterApp', [])
    .filter('reverse', function() { 
    return function(input, uppercase) { 
    input = input || '';
    var out = '';
    for (var i = 0; i < input.length; i++) {
    out = input.charAt(i) + out;
    }
    // conditional based on optional argument
    if (uppercase) {
    out = out.toUpperCase();
    }
    return out;
    };
    })
    .controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) { 
    $scope.greeting = 'hello';
    $scope.filteredGreeting = reverseFilter($scope.greeting);
    }]);

效果

No filter: hello
    Reverse: olleh
    Reverse + uppercase: OLLEH