AngularJS 过滤器

来源：互联网发布：淘宝店铺装修收费标准编辑：程序博客网时间：2024/04/27 18:05

前言

今天来把自己对AngularJS的一些认识和感悟给写下来，希望能和大家分享。

Angular的过滤器

Angular内部提供了一组过滤器，我们可以把他嵌在html里，就和angular的指令特性一样，不过这里我们需要借助的是一个 “|” 管道操作符，和stream的管道流有几分相似。
Angular内部提供了一组常用的过滤器，分别为一下几种:

1.currency 用两个小数位和一个货币符号来格式化一组数字
2.date 通过制定的格式来格式化一个时间
3.number 用指定的小数位来格式化输入
4.lowercase 将输入变为小写
5.uppercase 将输入变为大写
6.json 主要用于调试，能打印出被格式化后的json对象
7.orderBy 作用于数组的排序

以上就是比较常用的Angular内置的过滤器

除此之外，Angular还提供了一种“通用”的过滤器filter,之所以称之为通用，是因为它的名字而来的，它的名字就叫做filter。

下面可以做一个演示
拿到一组数据，然后将它用输入的数据当做索引，进行过滤

<!DOCTYPE html><html lang="en" ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div ng-controller="myController">        <table>            <tr ng-repeat="x in arr">                <td>{{x.name}}</td>                <td>{{x.age}}</td>            </tr>        </table>    </div>    <script src="./lib/angular.min.js" type="text/javascript"></script>    <script type="text/javascript">        angular.module("myApp",[])            .controller("myController",$scope => {                //声明一组数据                $scope.arr = [                    {name:'zhangsan',age:18},                    {name:'zhagsan',age:12},                    {name:'zngsan',age:13},                    {name:'zhangs',age:14},                    {name:'angsan',age:18}                ];            });    </script></body></html>

显示结果如下
这里写图片描述

现在我们来加一个用于输入过滤信息的输入框,创建一个有输入过滤的动态表格

<div ng-controller="myController">        <table>        <input type="text" ng-model="text">            <tr ng-repeat="x in arr | filter:text">                <td>{{x.name}}</td>                <td>{{x.age}}</td>            </tr>        </table>    </div>

稍微修改了一下controller
这样看来，我们只把input的输入内容绑定在了一个名为text的数据模型上，然后传入filter过滤器，之后，我们就可以看到，我们已经可以过滤信息了
这里写图片描述

自定义过滤器

下面我们来创建一个自定义的过滤器，用于数据分页,后台为node.js ，数据库为mongodb，数据皆从mongodb拿到的。
由于都有注释我就不一一讲解了。

<!DOCTYPE html><html lang="en" ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .even{            background: #dcdcdc;        }        .odd{            background: transparent;        }    </style></head><body><!-- <input type="color"> -->    <div ng-controller="myController">        <!-- 用于选择排序方式 -->        <select name="aaa" ng-change="printSeleState()" ng-model="orderIndex" ng-options="x.v as x.text for x in selectArr"></select>        <!-- 过滤器 -->        <input type="text" placeholder="请输入你要过滤的数据" ng-model="filterText" />        <!-- 用于接受来自数据库的数据 -->        <table>            <tr>                <td>name</td>                <td>age</td>            </tr>            <tr ng-repeat="x in arr | filter:filterText | zzh:pageIndex:PAGE_SIZE" ng-class="{even:$even,odd:$odd}">                <td>{{x.name}}</td>                <td>{{x.age}}</td>            </tr>        </table>        <!-- 分页实现 -->        <div>            <button ng-click="jump($event.target)">1</button>            <button ng-click="jump($event.target)">2</button>            <button ng-click="jump($event.target)">3</button>            <button ng-click="jump($event.target)">4</button>        </div>    </div>    <script type="text/javascript" src="./lib/angular.min.js"></script>    <script type="text/javascript">        //创建模块作用域        angular.module("myApp",[])            //转换为大写过滤器            .filter("zzh",() => {                return (inputData,pageIndex,PAGE_SIZE) => {                    try{                        let start = pageIndex * PAGE_SIZE;                        return inputData.slice(start,start + PAGE_SIZE);                    }                    catch(err){                        // 吞并Exception                        // console.log(err);                    }                }            })            //获取数据的service            .factory('getData', ['$http', $http => {                return () => {                    return $http.get("http://localhost:9999");                };            }])            //controller逻辑            .controller('myController', ['$scope','getData','$filter',($scope,getData,$filter) => {                //页码                $scope.pageIndex = 0;                //每页数目                $scope.PAGE_SIZE = 4;                //分页按钮点击                $scope.jump = (obj) => {                    $scope.pageIndex = obj.innerHTML - 1;                }                //获取后台mongodb数据                getData()                .then(obj => {                    $scope.arr = obj.data;                })                .catch(err => {                    if(err){                        console.log("have a err in this project");                    }                });            }]);    </script></body></html>

这样，我们就创建了一个数据分页的应用

下面我们来看看效果

这里写图片描述

下面为mongodb的上的数据
这里写图片描述

0 0