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. Grafana+Prometheus系统监控之MySql

    架构 grafana和prometheus之前安装配置过,见:Grafana+Prometheus打造全方位立体监控系统 MySql安装 MySql的地位和重要性就不言而喻了,作为开源产品深受广大中小 ...

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

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

  3. 照虎画猫写自己的Spring

    从细节跳出来 看了部分Spring的代码,前面用了四篇内容写了一些读书笔记. 回想起来,论复杂度,Spring够喝上好几壶的.他就像一颗枝繁叶茂的大树,远处看,只是一片绿:走近看,他为你撑起一片小天地 ...

  4. typescript入门基础

    1.typescript介绍 微软开发的一门编程语言,javascript的一个超集,遵循最新的ES6脚本语言规范(2015年发布),它扩展了Javascript的语法,任何已经写好的javascri ...

  5. shell ping一个IP，延时大于5，输出延时大于5s，打印输出

    # ping一个IP,延时大于5,输出延时大于5s,打印输出 #!/bin/bash ip=$* echo $ip num=`ping  -c 10 ${ip}|grep icmp_seq|awk ' ...

  6. Ambari概览

    文章作者:luxianghao 文章来源:http://www.cnblogs.com/luxianghao/p/7886195.html  转载请注明,谢谢合作. 免责声明:文章内容仅代表个人观点, ...

  7. （二）部署solr7.1.0到tomcat

    solr7.1.0部署到tomcat8 官方表示solr5之后的版本不再提供对第三方容器的支持(不提供war包了). "旧式"solr.xml格式不再支持,核心必须使用core.p ...

  8. java 之 工厂模式（大话设计模式）

    在以前的文章里面讲述过简单工厂模式,见链接:http://www.cnblogs.com/zhuxiansheng/p/7873161.html 简单工厂模式解耦了客户端和实现的依赖,不过如果有再次扩 ...

  9. c语言的作用域、变量与结构体

    一.变量的作用域 根据变量的作用域,可以分为: 1.局部变量: 1> 定义:在函数(代码块)内部定义的变量(包括函数的形参) 2> 作用域:局部变量只有在定义它的函数内部使用,其它函数不能 ...

  10. IPv6 VS IPv4，谈谈升级 IPv6 的必要性

    11月26日,中办.国办印发了<推进互联网协议第六版(IPv6)规模部署行动计划>,提出国内要在 5~10 年的时间形成下一代互联网自主技术体系和产业生态,建成全球最大规模的 IPv6 商 ...