angular中过滤器解析

最新推荐文章于 2018-03-13 14:43:40 发布

ITzhongzi

最新推荐文章于 2018-03-13 14:43:40 发布

阅读量2.1k

点赞数 1

分类专栏：前端学习笔记文章标签： angular

本文链接：https://blog.csdn.net/ITzhongzi/article/details/68620777

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

1.1. angular中的过滤使用浅析

1.2. 本文章主要针对 angular内置对象的使用和自定义对象的使用进行解析

1.3. 过滤器( filter )

    1.- 在 ng 中过滤器是用在表达式中, 或代码中将某一个数据进行格式化或筛选转换而用的语法结构.

1.4. 语法1:

    {{ ng 表达式 | 过滤器名 :参数1 :参数2 }}

    类似:

    function 过滤器名( ng 表达式, 参数1, 参数2 ) {
        return ...
    }

1.5. 语法2:

    在 代码中 注入 $filter 函数, 该函数需要字符串参数, 用于描述需要拿到什么过滤器,
    $filter 函数返回一个函数, 这个返回的函数即可实现格式化或筛选. 
    这里函数第一个参数是需要过滤的数据, 第二个以后的参数是在过滤时需要的参数.

1.5.1. 在angular中内置了9个过滤器，如下所示：

    - currency       货币过滤器
    - date           日期过滤器
    - filter         自定义过滤器
    - json           json过滤器（不太常用）
    - limitTo        限制（或者成为条件）过滤器
    - lowercase      小写字母过滤器
    - number         数字过滤器
    - orderBy        排序过滤器
    - uppercase      大写字母过滤器

1.6. currency 货币过滤器

1.6.1. 解析：

    0、currency过滤器会把一个数字，改成美元形式，例如： 123455  -----》   $123,455.00
    1、<script src="./angular-locale_zh-cn.js"></script> 是为了把金币符号转换为人民币￥的符号
    2、 默认的金币符号是美元的符号
    3、currency会默认保留小数点后两位，没有小数点的话用"xxx.00"补齐

1.7. 示例demo：

    <script>
    angular.module('currencyExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
    $scope.amount = 1234.56;
    }]);
    </script>
    <div ng-controller="ExampleController">
    <input type="number" ng-model="amount" aria-label="amount"> <br>
    default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
    custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span>
    no fractions (0): <span id="currency-no-fractions">{{amount | currency:"USD$":0}}</span>
    </div>

1.8. date 日期过滤器

1.8.1. 解析：

    1、new Date（）创建的对象时间日期存储的形式为 Thu Mar 30 2017 22:42:32 GMT+0800 (中国标准时间)
    同过date过滤器可以很轻松的改成我们想要的时间日期的样式：
            例如  now | date :'yyyy年MM月dd日 hh时mm分ss秒'   可以把时间转换成 2017年03月30日 10 时44分37秒 
    2、date过滤器中的  汉子都可以随便改， 但是 yyyy MM 等不能修改。
    3、date过滤器很灵活，比如 要转换成 10 时44分37秒 ，把过滤器改成：now | date :'hh时mm分ss秒'
                            要转换成 10 ：44：37   ，把过滤器改成：now | date :'hh ：mm ：ss'
                            要转换成 10 时44分 ，把过滤器改成：now | date :'hh时mm分'
    4、<script src="./angular-locale_zh-cn.js"></script>文件是为了把时间转换成中国本地的时间形式

1.9. 示例demo

    <script src="../../angular.js"></script>
    <script src="./angular-locale_zh-cn.js"></script>
    <body ng-app="mainApp">
    {{ now }}
    <br>
    {{ now | date :'yyyy年MM月dd日 hh时mm分ss秒' }}
    <br>
    {{ now | date :'MM月dd日 yyyy年 hh时mm分ss秒 EEEE' }}
    </body>
    <script>
    angular.module( 'mainApp', [] )
            .run( function ( $rootScope ) {
            $rootScope.now = new Date();
            });
    </script>

1.10. date过滤器的另一种书写形式

    <body ng-app="mainApp">
    {{ now }}
    </body>

    <script>
    angular.module( 'mainApp', [] )
                                                            // 1, 注入 $filter
            .run( [ '$rootScope', '$filter', function ( $rootScope, $filter ) {
            var curr = new Date();
            // 2, 利用 $filter 拿到 date 过滤器
            var dateFn = $filter( 'date' );
            // 此时 dateFn 就是一个用于过滤时间对象的函数
            // 该函数有两个参数, 第一个参数是需要过滤的数据
            // 第二个参数是 过滤使用的格式
            $rootScope.now = dateFn( curr, 'yyyy-MM-dd HH:mm:ss EEEE 哈哈哈哈' );
            }]);
    </script>

1.11. limitTo 限制过滤器

1.11.1. 解析

    1、常常用于将一个数组或字符串中的某一部分取出来
    2、当要过滤数组，且过滤器后面的参数是一个数字，这时候取出数组的前几个元素，
       当要过滤数组，且过滤器后面的参数是有两个参数，第一个表示要过滤的长度，第二个表示开始的元素
    3、当要过滤字符串时，且过滤器后面传入一个数字参数时，表示要取出字符串的前几个字符
       当要过滤字符串时，且过滤器后面传入连个参数时，第一个表示要过滤的长度，第二个表示开始的字符

1.12. 示例demo：

    <script>
    angular.module('limitToExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
    $scope.numbers = [1,2,3,4,5,6,7,8,9];
    $scope.letters = "abcdefghi";
    $scope.longNumber = 2345432342;
    $scope.numLimit = 3;
    $scope.letterLimit = 3;
    $scope.longNumberLimit = 3;
    }]);
    </script>
    <div ng-controller="ExampleController">
    <label>
    Limit {{numbers}} to:
    <input type="number" step="1" ng-model="numLimit">
    </label>
    <p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
    <label>
    Limit {{letters}} to:
    <input type="number" step="1" ng-model="letterLimit">
    </label>
    <p>Output letters: {{ letters | limitTo:letterLimit }}</p>
    <label>
    Limit {{longNumber}} to:
    <input type="number" step="1" ng-model="longNumberLimit">
    </label>
    <p>Output long number: {{ longNumber | limitTo:longNumberLimit }}</p>
    </div>

1.12.1. 重点是 filter 过滤器（重点）

1.12.2. 解析：

    1、 filter 过滤器的使用
         语法: 表达式 | filter: 参数
         在一个数组或对象或字符串中利用 filter 过滤, 取出符合过滤项的数据

         filter 的参数就是过滤的条件
    2、参数可以是
         1> 字符串( 遍历每一个数据中的 每一个数据 如果匹配到了就保留下来 )
         2> 对象( 提供键值, 在过滤的时候会根据键来寻找 )
         3> 函数( 根据每一个数据都会调用一次函数, 根据函数的返回值来确定是否需要保留数据 )

1.13. 示例demo（参数为字符串）：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../angular.js"></script>
    </head>
    <body ng-app="mainApp">
    <input type="text" ng-model="txt"> <br>
    <table border="1" width="800">
            <thead>
            <th>编号</th>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
            </thead>
            <tbody>
            <tr ng-repeat="item in list | filter: txt">
                    <td>{{ $index }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender }}</td>
            </tr>
            </tbody>
    </table>
    </body>
    <script>
    var data = [
            { name: 'jim', age: 89, gender: 'man' },
            { name: 'tom', age: 29, gender: 'female' },
            { name: 'jack', age: 39, gender: 'man' },
            { name: 'jerry', age: 49, gender: 'female' },
            { name: 'rose', age: 59, gender: 'man' },
            { name: 'bob', age: 69, gender: 'female' },
            { name: 'deve', age: 79, gender: 'man' },
            { name: 'hanmeimei', age: 19, gender: 'female' }
    ];
    angular.module( 'mainApp', [] )
            .run( function ( $rootScope ) {
            $rootScope.list = data;
            });
    </script>
    </html>

1.14. 示例demo2（参数为对象）：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../angular.js"></script>
    </head>
    <body ng-app="mainApp">
    <input type="text" ng-model="txt"> <br>
    <table border="1" width="800">
            <thead>
            <th>编号</th>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
            </thead>
            <tbody>
            <tr ng-repeat="item in list | filter: { name: txt }">
                    <td>{{ $index }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender }}</td>
            </tr>
            </tbody>
    </table>
    </body>
    <script>
    var data = [
            { name: 'jim', age: 89, gender: 'man' },
            { name: 'tom', age: 29, gender: 'female' },
            { name: 'jack', age: 39, gender: 'man' },
            { name: 'jerry', age: 49, gender: 'female' },
            { name: 'rose', age: 59, gender: 'man' },
            { name: 'bob', age: 69, gender: 'female' },
            { name: 'deve', age: 79, gender: 'man' },
            { name: 'hanmeimei', age: 19, gender: 'female' }
    ];
    angular.module( 'mainApp', [] )
            .run( function ( $rootScope ) {
            $rootScope.list = data;
            });
    </script>
    </html>

1.15. 示例demo3（参数为函数时）：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../angular.js"></script>
    </head>
    <body ng-app="mainApp">
    <input type="text" ng-model="txt"> <br>
    <table border="1" width="800">
            <thead>
            <th>编号</th>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
            </thead>
            <tbody>
            <tr ng-repeat="item in list | filter: getLt30">
                    <td>{{ $index }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender }}</td>
            </tr>
            </tbody>
    </table>
    </body>
    <script>
    var data = [
            { name: 'jim', age: 89, gender: 'man' },
            { name: 'tom', age: 29, gender: 'female' },
            { name: 'jack', age: 39, gender: 'man' },
            { name: 'jerry', age: 49, gender: 'female' },
            { name: 'rose', age: 59, gender: 'man' },
            { name: 'bob', age: 69, gender: 'female' },
            { name: 'deve', age: 79, gender: 'man' },
            { name: 'hanmeimei', age: 19, gender: 'female' }
    ];
    angular.module( 'mainApp', [] )
            .run( function ( $rootScope ) {
            $rootScope.list = data;

            $rootScope.getLt30 = function ( curr, index, arr ){
                    // 第一个参数是当前遍历的元素
                    // return curr.age <= 30;

                    var value = $rootScope.txt || 0;

                    // value 为一个字符串, 为 0
                    if ( value != 0 ) {
                    value = parseInt( value ); // NaN
                    }

                    // 0, 数字, NaN
                    if ( value != value ) {
                    value = 0;
                    }
                    // 0 或 数字

                    console.log( value );

                    if ( value ) {
                    return curr.age <= value;
                    } 
                    return true;
            };
            });
    </script>
    </html>

1.16. 示例demo（综合案例）4：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../angular.js"></script>
    <style>
            .clickable {
            cursor: pointer;
            }
    </style>
    </head>
    <body ng-app="mainApp">
    <input type="button" value="按照年龄排序" ng-click="txt= txt=='age' ? '-age': 'age'" > <br>
    <table border="1" width="800">
            <thead>
            <th>编号</th>
            <th class="clickable" ng-click="txt= txt=='name' ? '-name': 'name'">name</th>
            <th class="clickable" ng-click="txt= txt=='age' ? '-age': 'age'">age</th>
            <th class="clickable" ng-click="txt= txt=='gender' ? '-gender': 'gender'">gender</th>
            </thead>
            <tbody>
            <tr ng-repeat="item in list | orderBy:txt">
                    <td>{{ $index }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender }}</td>
            </tr>
            </tbody>
    </table>
    </body>
    <script>
    var data = [
            { name: 'jim', age: 89, gender: 'man' },
            { name: 'tom', age: 29, gender: 'female' },
            { name: 'jack', age: 39, gender: 'man' },
            { name: 'jerry', age: 49, gender: 'female' },
            { name: 'rose', age: 59, gender: 'man' },
            { name: 'bob', age: 69, gender: 'female' },
            { name: 'deve', age: 79, gender: 'man' },
            { name: 'hanmeimei', age: 19, gender: 'female' }
    ];
    angular.module( 'mainApp', [] )
            .run( function ( $rootScope ) {
            $rootScope.list = data;

            // $rootScope.txt = 'age'; // 按照 'age' 这个属性升序排序
            // $rootScope.txt = '-age';
            });
    </script>
    </html>

1.17. 自定义过滤器

    步骤：1、现在js中定义一个过滤器
          2、在代码中使用

1.17.1. 示例demo解析：

    <body ng-app="mainApp">
            {{ 'getElementById' | myConvert }}
            <br>
            {{ 'getElementById' }}
            <br>
            {{ txt }}
    </body>
    <script>
    angular.module( 'mainApp', [] )
    .filter( 'myConvert', [ '$filter', function ( $filter ) {
        return function ( data ) {
            return data.replace( /(.)([A-Z])/g, function ( _, a, b ) {
                return a + '-' + b.toLowerCase();
            }).replace( /(.)([A-Z])/g, function ( _, a, b ) {
                return a + '-' + b.toLowerCase();
            });
        }
    }] )
    .run( [ '$rootScope', '$filter', function ( $rootScope, $filter ) {
        $rootScope.txt = $filter( 'myConvert' )( 'querySelectotAll' );
    }] )
    </script>

1.17.1.1. 以上过滤器实现了驼峰转换，例如： 'getElementById' -> 'get-element-by-id'

1.18. orderBy 排序过滤器

1.18.1. 解析：

        1、接受一个字符串表示要排序的条件
        2、一下例子中点击每一个表头（即th标签）中的内容自动按照当前组排序

1.18.1.1. 示例demo：

    <style>
            table {
            margin: 0 auto;
            }
            th {
            cursor: pointer;
            }
    </style>

    <body ng-app="mainApp">
    <div class="container" ng-controller="mainController">
            <table width="600" border="1px solid #ccc">
            <th>序号</th>
            <th ng-click="txt = txt == 'name' ? '-name': 'name'">姓名</th>
            <th ng-click="txt = txt == 'age' ? '-age': 'age'">年龄</th>
            <th ng-click="txt = txt == 'gender' ? '-gender': 'gender'">性别</th>
            <tr ng-repeat="item in list |orderBy : txt">
                    <td>{{$index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
            </tr>
            </table>
    </div>
    <script>
            var data = [
            { name: 'jim', age: 89, gender: 'man' },
            { name: 'tom', age: 29, gender: 'female' },
            { name: 'jack', age: 39, gender: 'man' },
            { name: 'jerry', age: 49, gender: 'female' },
            { name: 'rose', age: 59, gender: 'man' },
            { name: 'bob', age: 69, gender: 'female' },
            { name: 'deve', age: 79, gender: 'man' },
            { name: 'hanmeimei', age: 19, gender: 'female' }
            ];

            angular.module('mainApp', [])
            .controller('mainController', ['$scope', function ($scope) {
                    $scope.list = data;

            }])
    </script>
    </body>

2. 本文有诸多不足之处，有不足之处望之处。

2.1. 交流让我们一起进步

ITzhongzi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular中过滤器解析

1.1. angular中的过滤使用浅析1.2. 本文章主要针对 angular内置对象的使用和自定义对象的使用进行解析1.3. 过滤器( filter ) 1.- 在 ng 中过滤器是用在表达式中, 或代码中将某一个数据进行格式化或筛选转换而用的语法结构.1.4. 语法1: {{ ng 表达式 | 过滤器名 :参数1 :参数2 }} 类似:
复制链接

扫一扫