1.过滤器主要用于数据的筛选，可以直接在模板使用

语法：

{{expression | filter}}

{{expression | filter | filter2}}

{{expression | filter : param....}}

例子：

demo3.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div ng-app="myApp">

    <div ng-controller="myController">

        <p>{{1234567 | number}}</p>

        <p>{{1234567 | number : 3}}</p>

        <p>{{1234567 | currency}}</p>

        <p>{{date | date : 'yyyy-MM-dd HH:mm:ss'}}</p>

        <p>{{[1,2,3,4,5,6] | limitTo:5}}</p>

        <p>{{'AbCdefG' | lowercase}}</p>

        <p>{{'AbCdefG' | uppercase}}</p>

        <p>{{city | filter : '上海'}}</p>

        <p>{{city | filter : {address:'h'} }}</p>

        <p>{{city | orderBy : 'address' }}</p>

        <p>{{city | orderBy : '-address' }}</p>

        <p>{{city | filter : checkName }}</p>

    </div>

</div>

<script type="text/javascript" src="../common/angular/angularjs.js"></script>

<script type="text/javascript" src="demo3.js"></script>

</body>

</html>

demo3.js

/**

 * Created by Administrator on 2017/7/22.

 */

angular.module('myApp', [])

    .factory('myData', function () {

        return {

            message: 'wddsad',

            city: [

                {

                    name: '张三',

                    address: '上海'

                },

                {

                    name: '李四',

                    address: 'shenzhen'

                }

            ]

        };

    })

    .controller('myController', function ($scope, myData,$filter) {

        $scope.date = new Date();

        $scope.city = myData.city;

        $scope.data = myData;

        //过滤器

        var a = $filter('number')(3000);

        // console.log(a);

        var b = $filter('json')($scope.data);

        // console.log(b);

        $scope.checkName = function(obj){

            if(obj.name.indexOf('张') === -1){

                return false;

            }

            return true;

        }

    })

效果图

2.自定义过滤器

自定义过滤器有两种方法：推荐用第二种

1. $filterProvider.register()

2.module.filter(name,filterFactory)

第一种方式：$filterProvider.register()

例子

demo4.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div ng-app="myApp">

    <div ng-controller="myController">

        <ul>

            <!-- ng-repeat 循环数据，通过 | 调用自定义过滤器 filterAge -->

            <li ng-repeat="d in data | filterAge">

                {{d.name}}

                {{d.age}}

                {{d.address}}

            </li>

        </ul>

    </div>

</div>

<script type="text/javascript" src="../common/angular/angularjs.js"></script>

<script type="text/javascript" src="demo4.js"></script>

</body>

</html>

demo4.js

/**

 * Created by Administrator on 2017/7/22.

 */

/**

 * 第三个参数的 function 注入了三个服务 $filterProvider, $provider, $controllerProvider

 * 注入 $filterProvider 用 $filterProvider.register() 方法自定义过滤器

 * 注入 $provider 主要是要用到 service ,数据通过 service 初始化，service是 $provider 提供的

 * 注入 $controllerProvider 主要是要用到 controller ，controller是 $controllerProvider 提供的

 * 其实注入 service,controller都可以通过 moudle 简便方式注入，这里只是提供另外一种写法，一般写法如：

 * angular.moudle('myApp',[])

 * .service()

 * .controller()

 * ......

 */

angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {

    // 注册 service（注册service时，里面的function返回必须是对象，也就是返回引用类型，不能是字符串或者数字，不然会报错）

    $provide.service('myData', function () {

        return [

            {

                name: '张三',

                age: 18,

                address: '北京'

            },

            {

                name: '李四',

                age: 25,

                address: '深圳'

            }

        ];

    });

    //注册自定义过滤器

    $filterProvider.register('filterAge', function () {

        //这里必须要返回一个function

        return function (obj) {

            var result = [];

            angular.forEach(obj, function (o) {

                if (o.age > 20) {

                    result.push(o);

                }

            })

            return result;

        }

    });

    //注册 controller

    $controllerProvider.register('myController', function ($scope, myData) {

        console.log(myData);

        $scope.data = myData;

    });

})

第二种方式：angular.module().filter()

angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {

    // 注册 service

    $provide.service('myData', function () {

        return [

            {

                name: '张三',

                age: 18,

                address: '北京'

            },

            {

                name: '李四',

                age: 25,

                address: '深圳'

            }

        ];

    });

    //注册自定义过滤器（年龄）

    $filterProvider.register('filterAge', function () {

        //这里必须要返回一个function

        return function (obj) {

            var result = [];

            angular.forEach(obj, function (o) {

                if (o.age > 20) {

                    result.push(o);

                }

            })

            return result;

        }

    });

    //注册 controller

    $controllerProvider.register('myController', function ($scope, myData) {

        console.log(myData);

        $scope.data = myData;

    });

})

    //自定义过滤器（城市）（主要就是这里的写法不同，在外层写 filter，思路都一样）

    .filter('filterAddress',function () {

        //返回一个function

        return function (obj) {

            var result = [];

            angular.forEach(obj, function (o) {

                if (o.address === '北京') {

                    result.push(o);

                }

            })

            return result;

        }

    })

angular过滤器基本用法的更多相关文章

  1. Angular过滤器

    angular中的过滤器有: currency 过滤货币 number  过滤数字, date  过滤日期 json 把js对象过滤为json字符串 limitTo  截取字符串,参数是正数则从左往右 ...

  2. Servlet过滤器Filter用法

    1 Servlet 过滤器方法 过滤器是一个实现了 javax.servlet.Filter 接口的 Java 类.javax.servlet.Filter 接口定义了三个方法:public void ...

  3. Angular - ng-repeat高级用法

    ng-repeat高级用法: 遍历数组:    <li ng-repeat="item in array">{{item}}</li> 遍历对象:    k ...

  4. Angular过滤器 自定义及使用方法

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  5. Angular 过滤器的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. angular.element()的用法

    1.引用jQuery的前提下,和$用法基本相同:angular.element('#').html() 例如: angular.element('#test').html() angular.elem ...

  7. angular过滤器使用 自定义过滤器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  8. 如何angular过滤器进行排序？？？

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  9. angular中$q用法, $q多个promise串行/同步/等待）， $q.all用法,使用

    $q的基本用法 function fn() { var defer = $q.defer(); setTimeout(function () { console.log(1); defer.resol ...

随机推荐

  1. jquery.tagsinput的使用例子，包括模糊查询后端代码

    <link rel="stylesheet" type="text/css" href="~/lib/jquery.tagsinput.jurg ...

  2. 在Linux机器上安装telnet命令

    一.查看本机是否安装       telnet #rpm -qa | grep telnet     如果什么都不显示,说明没有安装telnet 二.开始安装 yum install xinetd y ...

  3. java多线程创建-Thread,Runnable,callable和threadpool

    java创建多线程的方式有许多种,这里简要做个梳理 1. 继承Thread类 继承java.lang.Thread类,创建本地多线程的类,重载run()方法,调用Thread的方法启动线程.示例代码如 ...

  4. Json字符串解析原理、超大json对象的解析

    概述 附上完整的代码:https://pan.baidu.com/s/1dEDmGz3(入口类是Json)JSON:JavaScript 对象表示法(JavaScript Object Notatio ...

  5. pt-query-digest

    pt-query-digest默认查询时间分布 # Query_time distribution # 1us # 10us ##################################### ...

  6. Python之数据类型-[bisect,heap]

    bisect >>> import bisect >>> >>> b = [ 20, 34, 35, 65, 78 ] >>> ...

  7. springMVC+spring+MyBatis(SSM)的简单配置

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. 其中: Spring是一 ...

  8. Cordic算法——圆周系统之向量模式

    旋转模式用来解决三角函数,实现极坐标到直角坐标的转换,基础理论请参考Cordic算法--圆周系统之旋转模式.那么,向量模式则用来解决反三角函数的问题,体现的应用主要是直角坐标向极坐标转换,即已知一点的 ...

  9. javascript函数式编程（一）

    一.引言 javascript函数式编程在最近两年来频繁的出现在大众的视野,越来越多的框架(react,angular,vue等)标榜自己使用了函数式编程的特性,好像一旦跟函数式编程沾边,就很高大上一 ...

  10. 实现基于tomcat集群会话保持

    1.实验环境 我们需要准备两台虚拟机,把这两台虚拟机组成集群,实现会话保持. 2.配置server1 2.1 修改nginx配置文件 [root@server1 ~]# vim /etc/nginx/ ...