angular中的过滤使用浅析

发布时间：2020-12-17 09:14:34 所属栏目：安全来源：网络整理

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

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',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,{ name: 'jerry',age: 49,{ name: 'rose',age: 59,{ name: 'bob',age: 69,{ name: 'deve',age: 79,{ name: 'hanmeimei',age: 19,gender: 'female' }
    ];
    angular.module( 'mainApp',[] )
            .run( function ( $rootScope ) {
            $rootScope.list = data;
            });
    </script>
    </html>

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

 
 1.15. 示例demo3（参数为函数时）： 
 
 1.16. 示例demo（综合案例）4： 
 
 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,b ) {
                return a + '-' + b.toLowerCase();
            });
        }
    }] )
    .run( [ '$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',gender: 'female' }
            ];

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

            }])
    </script>
    </body> 
 
 
  
 
 
  1.1. angular中的过滤使用浅析 
 1.2. 本文章主要针对 angular内置对象的使用和自定义对象的使用进行解析 
 1.3. 过滤器( filter ) 
 1.4. 语法1: 
 1.5. 语法2: 
 1.5.1. 在angular中内置了9个过滤器，如下所示： 
 - currency       货币过滤器
    - date           日期过滤器
    - filter         自定义过滤器
    - json           json过滤器（不太常用）
    - limitTo        限制（或者成为条件）过滤器
    - lowercase      小写字母过滤器
    - number         数字过滤器
    - orderBy        排序过滤器
    - uppercase      大写字母过滤器 
 1.6. currency 货币过滤器 
 1.6.1. 解析： 
  
 1.7. 示例demo： 
  
 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 
 1.10. date过滤器的另一种书写形式 
 1.11. limitTo 限制过滤器 
 1.11.1. 解析 
 1、常常用于将一个数组或字符串中的某一部分取出来
    2、当要过滤数组，且过滤器后面的参数是一个数字，这时候取出数组的前几个元素，
       当要过滤数组，且过滤器后面的参数是有两个参数，第一个表示要过滤的长度，第二个表示开始的元素
    3、当要过滤字符串时，且过滤器后面传入一个数字参数时，表示要取出字符串的前几个字符
       当要过滤字符串时，且过滤器后面传入连个参数时，第一个表示要过滤的长度，第二个表示开始的字符 
 1.12. 示例demo： 
  
 1.12.1. 重点是 filter 过滤器（重点） 
 1.12.2. 解析： 
 1.13. 示例demo（参数为字符串）： 
 1.14. 示例demo2（参数为对象）： 
 1.15. 示例demo3（参数为函数时）： 
 1.16. 示例demo（综合案例）4： 
 1.17. 自定义过滤器 
 步骤：1、现在js中定义一个过滤器
          2、在代码中使用 
 1.17.1. 示例demo解析： 
 1.17.1.1. 以上过滤器实现了驼峰转换，例如： 'getElementById' -> 'get-element-by-id' 
 1.18. orderBy 排序过滤器 
 1.18.1. 解析： 
 1、接受一个字符串表示要排序的条件
        2、一下例子中点击每一个表头（即th标签）中的内容自动按照当前组排序 
 1.18.1.1. 示例demo： 
 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!