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. Linux ext2文件系统之初步思考

    数据存放在磁盘中,磁盘最小存取单位sector(512Byte);文件系统中存储的最小单位是 块(Block),大小通常(1KB,2KB,4KB...), 一个block对应多个sector,因而可用 ...

  2. [转载] Java中常用的加密方法

    转载自http://www.iteye.com/topic/1122076/ 加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的 ...

  3. CLR设计类型之接口

    写在前面的话:             写到这一节的时候,CLR设计类型就已经结束了,因为CLR要求的是有一定基础的人看的,所以我们不是从基础类型以及运算符开始的,文章从一开始就讲的是深入面向对象编程 ...

  4. 前端面试题（3） cookie，sessionStorage和localStorage的区别

    cookie是网站为了标示用户身份存在用户本地终端上的数据(经过加密). cookie数据时钟在同源的http请求中携带(即使不需要),即会在浏览器和服务器之间传递. seeeionStorage和l ...

  5. C语 三子棋小游戏

    #include <stdio.h> #include <Windows.h> #include<time.h> #define row 3 #define lis ...

  6. Composer笔记

    安装 windows中安装Composer 一般来说,windows下安装composer有两种办法,一种是直接下载并运行Composer-Setup.exe,这种方法在中国似乎很难完成安装.另一种就 ...

  7. linux下expect命令实现批量ssh免密

    有时候我们需要批量发送ssh命令给服务器,但是有可能有些服务器是新加入的,还没有配置ssh免密,这个时候就会提示我们输入yes/no 或者password等,expect脚本命令就是用于在提示这些的时 ...

  8. 加密代理和Retrofit解密Converter

    最近在研究安卓的Retrofit框架,服务器的数据全部用加密算法加密了,发现无法使用"com.squareup.retrofit2:converter-gson:2.1.0"Jar ...

  9. JavaScript正则表达式（Regular Expression）：RegExp对象

    第一部分:新建正则表达式 JavaScript中正则表达式是参照Perl 5(一门历史很悠久的语言,现在tiobe编程语言排行依然在10名左右)建立的. 新建正则表达式的方法有两种: 1.使用字面量( ...

  10. eclipse工作空间的基本配置

    今天我们来学习一个小技巧,就是如何配置eclipse,对你没看错,就是配置eclipse,为什么要学这个呢?这个不是很简单吗?没错,是简单,但越是简单的东西有的时候人们总是会忽略一些什么,从未造成损失 ...