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. [转载] HDFS简介

    转载自http://www.csdn.net/article/2010-11-26/282582 http://subject.csdn.net/hadoop/ 一.HDFS的基本概念 1.1.数据块 ...

  2. iOS开发经验总结

    总结了几个月的东西终于能和大家分享了,不多说,直接看东西! 1.禁止手机睡眠 1 [UIApplication sharedApplication].idleTimerDisabled = YES; ...

  3. mysql数据库常用命令笔记

    连接数据库:mysql -h localhost -u root -p 000000 退出:exit;    \q;    quit; SET foreign_key_checks = 0; 禁用外键 ...

  4. h5前端流行的框架

    很多时候别人问你,上手的框架有哪些,其实我们都是知道的,只是一时却也说不上哪些比较,这里想给大家介绍一下,我所遇到的,还算好用的框架,做个分享 1 Bootstrap 官网:http://getboo ...

  5. 浅析php命名空间

    介绍 印象中只有java代码才会用到一大堆的import,当初看到后一脸懵逼并对php心生自豪:还是我大php牛逼够简洁,殊不知php也有命名空间这一说,这些年用的越来越多.那么,为什么要搞那么麻烦呢 ...

  6. C语言之成绩转换

    #include<stdio.h>int main(){int score,grade;scanf("%d",&score);grade=score/10;sw ...

  7. 《Linux命令行与shell脚本编程大全》第十九章 初识sed和gawk

    这两个工具能够极大简化需要进行的数据处理任务. 19.1 文本处理 能轻松实现自动格式化.插入.修改或删除文本元素的简单命令行编辑. sed和gawk就具备上述功能 19.1.1 sed编辑器 被称为 ...

  8. Logistic 回归模型 第一遍阅读笔记

    MLE :最大似然估计,求得的这套参数估计能够通过指定模型以最大概率在线样本观测数据 必须来自随机样本,自变量与因变量之间是线性关系 logistic 回归没有关于自变量分布的假设条件,自变量可以连续 ...

  9. Git版本控制器的使用

    首先介绍一下什么是Git:git是目前最流行的版本控制系统,属于分布式版本控制器. 使用Git前先要在GitHub创建代码仓库,或者获取你要应用的GitHub的链接地址. 创建GitHub仓库这里就不 ...

  10. PHP大文件分割上传（分片上传）

    服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 upload_max_filesize = 2M //PHP最大能接受的文件大小 post_max_size = 8M //PHP能收 ...