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. python PIL图像处理

    新建图像 # 三个参数分别代表图像的模式:常用的为RGB(3通道) .RGBA(4通道为透明通道,0为完全透明, 256为不透明) # 第二个参数为图像的长宽参数 # 第三个为默认的填充颜色,RGB时 ...

  2. 【Java】java 中的泛型通配符——从“偷偷地”地改变集合元素说起

    一直没注意这方面的内容,想来这也算是基础了,就写了这个笔记. 首先java的通配符共有三种----先别紧张,现在只是粗略的过一下,看不看其实无所谓 类型 介绍 <?> 无限定通配符,等价于 ...

  3. jQuery与别的js框架冲突

    jQuery.noConflict()运行这个函数将变量$的控制权让渡给第一个实现它的那个库. 这有助于确保jQuery不会与其他库的$对象发生冲突. <script type="te ...

  4. ios2048小游戏

    最近突然想写一个2048的小游戏,由于全部是自定义控件,所以程序看起来冗杂,但是核心的算法部分还是很不错的,大家感兴趣的可以仔细看看. 声明部分: #import <UIKit/UIKit.h& ...

  5. 一道JS 连续赋值运算的问题

    原文链接:https://www.cnblogs.com/joesbell/p/6229423.html <script> var a = {n:1}; var b = a; a.x = ...

  6. 《Linux命令行与shell脚本编程大全》第二十章 正则表达式

    20.1 什么是正则表达式 20.1.1 定义 正则表达式是你所定义的模式模板.linux工具可以用它来过滤文本. 正则表达式利用通配符来描述数据流中第一个或多个字符. 正则表达式模式含有文本或特殊字 ...

  7. sql server 2008 r2 登陆时显示无法打开默认的数据库

    解决! 第一步: 远程其他服务器的数据库能连上,本地的数据库某个用户名就是打不开,一开始以为是用户名或者密码错误, 后来用sqlcmd dos命令 -S . -U an -P sa 的方式登陆时可以的 ...

  8. 实践作业3DAY1

    今天,老师又布置了新的学习任务,关于白盒测试.感觉黑盒测试,我们用的比较多,白盒测试就相对陌生了.上课的时候老师虽然也进行了一定的点拨,外加我们学习了SPOC视频,但是并没有看到什么具体的项目,所以实 ...

  9. 简介CentOS与 Ubuntu的不同

    1.关于登录用户 centos可以使用root登录  ubuntu不能使用root登录 centos普通用户默认不能通过sudo取得root权限执行命令, ubuntu可以,centos需要sudo时 ...

  10. 探究PHP底层

    探究PHP底层 1.PHP是什么?   PHP 指的是我们从外面看到的一套完整的系统.这听起来有点糊涂,但其实并不复杂(PHP4 内部结构图).从功能上来分:我们可以分为三部分: 1. 解释器部分(Z ...