您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

　　第三天，过滤器第二篇---filter过滤器及其自定义过滤器

一、filter过滤器

　　filter过滤器我的理解就是一个筛选过滤器，主要是对集合数据进行筛选，其筛选条件支持字符串、对象、函数

　　字符串：筛选逻辑就是筛选出属性值包含该字符串的对象集合

　　　　　　同时还可以接受一个bool变量的参数（如果为true按照等于筛选）

　　　　　　格式为：{{被筛选的集合对象|filter:'要筛选的字符串':是否严格等于筛选}}

　　对象：筛选逻辑就是筛选出集合中包含该键值对对应的值的对象集合

　　　　　　格式为：{{被筛选的集合对象|filter:‘筛选条件对象’}}

　　函数：可以根据需要在函数里面编写筛选逻辑（有点自定义过滤器的效果）

　　　　　　格式为：{{被筛选的集合对象|filter:‘筛选自定义函数名称’}}

　　关于filter筛选的小练习

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    <div>

        <h1>filter 过滤器练习</h1>

        <div>属性值中包含hong的数据集合：{{dateList|filter:"hong"}}</div>

        <div>age中包含hong的数据集合：{{dateList|filter:'xuhongyuan':true }}</div>

        <div>age中包含hong的数据集合：{{dateList|filter:'xuhongyuan':false }}</div>

        <div>age中包含hong的数据集合：{{dateList|filter:{name:'xuhongyuan'} }}</div>

        <div>age中包含hong的数据集合：{{dateList|filter:fun }}</div>

    </div>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope) {

        $scope.dateList = [

            { name: "xurong", age: 35 },

            { name: "xuyanzi", age: 32 },

            { name: "xuhongyuan", age: 30 },

            { name: "xuhongyuanTest", age: 30 },

            { name: "Xuhongyuan", age: 30 },

            { name: "xuhongyong", age: 28 }

        ];

        $scope.fun = function (e) {

            return e.age > num;

        }

    });

</script>

二、json 过滤器

　　json过滤器可以将一个JSON或JavaScript对象转换成字json符串

三、limitTo 过滤器

　　limitTo过滤器实际上就是对字符串进行截取

　　　　如果参数为正，那么从字符串前面开始截取，如果参数为负，那么从字符串后面开始截取

　　　　格式：{{被截取的字符串|limitTo:截取长度}}

　　limitTo过滤器出了使用于字符串外，数组也是同样的原理

四、orderBy 过滤器

　　orderBy过滤器可以用表达式对指定的数组进行排序。默认升序

　　orderBy可以接受两个参数

　　　　第一个是必需的（排序字段及其方式，可以接收一个函数）

　　　　第二个是可选的（boolean，是否逆向，如果设置为true，则倒序）

　　关于json 、limitTo、orderBy过滤器的练习

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    <div>

        <h1>json 过滤器练习</h1>

        json过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助：<br />

        {{ dateList | json }}

        <h1>limitTo 过滤器练习</h1>

        limitTo过滤器实际上就是对字符串进行截取，如果参数为正，那么从字符串前面开始截取，如果参数为负，那么从字符串后面开始截取<br />

        limitTo过滤器出了使用于字符串外，数组也是同样的原理<br />

        <div>字符串前面截取保留10位：{{message|limitTo:10}}</div>

        <div>字符串后面截取保留7位：{{message|limitTo:-7}}</div>

        <div>数组前面截取保留2位：{{dateList|limitTo:2}}</div>

        <div>数组后面截取保留2位：{{dateList|limitTo:-2}}</div>

        <h1>orderBy 过滤器练习</h1>

        orderBy过滤器可以用表达式对指定的数组进行排序。默认升序<br />

        orderBy可以接受两个参数，第一个是必需的（排序字段及其方式，可以接收一个函数），第二个是可选的（boolean，是否逆向，如果设置为true，则倒序）。<br />

        <div>数组根据年龄升序：{{dateList|orderBy:"age"}}</div>

        <div>数组根据年龄降序：{{dateList|orderBy:"age":true}}</div>

    </div>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope) {

        $scope.dateList = [

            { name: "xurong", age: 35 },

            { name: "xuyanzi", age: 32 },

            { name: "xuhongyuan", age: 30 },

            { name: "xuhongyuanTest", age: 30 },

            { name: "Xuhongyuan", age: 30 },

            { name: "xuhongyong", age: 28 }

        ];

        $scope.message = "大家好好，我是马良，很高兴见到大家";

    });

</script>

五、自定义 过滤器

　　自定义过滤器可以根据实际业务需要编写对于的过滤器逻辑

　　定义格式为：
　　　　app.filter("自定义过滤器名称", function () {
　　　　　　return function (待过滤对象,参数1,参数2....) {
　　　　　　　筛选逻辑。。。。

　　　　　　　return 最终筛选的符合要求的结果
　　　　 }

　　调用方式：{{待过滤对象|自定义过滤器名称:参数1:参数2....}}

自定义过滤器练习：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    <div>

        <h1>自定义 过滤器</h1>

        <div>实现第一个字母大小：{{message|lowercase|myFilter}}</div>

        <div>对数据集合按照自定义集合进行筛选：{{dateList|myFilterObj:29}}</div>

    </div>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope) {

        $scope.dateList = [

            { name: "xurong", age: 35 },

            { name: "xuyanzi", age: 32 },

            { name: "xuhongyuan", age: 30 },

            { name: "xuhongyuanTest", age: 30 },

            { name: "Xuhongyuan", age: 30 },

            { name: "xuhongyong", age: 28 }

        ];

        $scope.message = "hello,my name is XuHongYuan!";

    });

    app.filter("myFilter", function () {

        return function (input) {

            if (input) {

                return input[00].toUpperCase() + input.slice(1);

            }

        }

    });

    app.filter("myFilterObj", function () {

        return function (input,angNum) {

            var outPut = [];

            angular.forEach(input, function (obj) {

                if (obj.age > angNum) {

                    outPut.push(obj);

                }

            })

            return outPut;

        }

    })

</script>

　　好了，时间也不早了，明天还要上班，今天就先学到这，明天继续学习表单验证，谢谢大家支持与鼓励。

angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）的更多相关文章

  1. angularjs学习第五天笔记（第二篇：表单验证升级篇）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  2. angularjs学习第四天笔记（第一篇：简单的表单验证）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  3. Elasticsearch7.X 入门学习第三课笔记----search api学习（URI Search）

    原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...

  4. Spring Cloud Alibaba学习笔记（19） - Spring Cloud Gateway 自定义过滤器工厂

    在前文中,我们介绍了Spring Cloud Gateway内置了一系列的内置过滤器工厂,若Spring Cloud Gateway内置的过滤器工厂无法满足我们的业务需求,那么此时就需要自定义自己的过 ...

  5. iOS阶段学习第三天笔记（运算符）

    iOS学习(C语言)知识点整理笔记 1.运算符 一.算术运算符 1)表达式由变量.常量.运算符构成,有确定的类型和值 2)算术运算符包括: +(加),-(减),*(乘),/(除),%(模) 3)算术运 ...

  6. angularjs学习第七天笔记（系统指令学习）

    您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...

  7. iOS 阶段学习第三天笔记（运算符）

    iOS学习(C语言)知识点整理笔记 1.运算符 一.算术运算符 1)表达式由变量.常量.运算符构成,有确定的类型和值 2)算术运算符包括: +(加),-(减),*(乘),/(除),%(模) 3)算术运 ...

  8. angularJS学习（三）——搭建学习环境

    1.安装Node.js 和Testacular 1.1. 安装Node.js及配置部分,在另一篇博文:node.js的安装里面讲到了,地址是:http://www.cnblogs.com/tianxu ...

  9. Python学习笔记【第二篇】：运算符、比较、关系运算符

    运算符 python支持以下几种运算符 算术运算符 运算符 描述 实例 + 加 两个对象相加 a + b 输出结果 30 - 减 得到负数或是一个数减去另一个数 a - b 输出结果 -10 * 乘 ...

随机推荐

  1. springmvc配置文件web.xml详解各方总结。

    Spring分为多个文件进行分别的配置,其中在servlet-name中如果没有指定init-param属性,那么系统自动寻找的spring配置文件为[servlet-name]-servlet.xm ...

  2. prometheus比zabbix好在哪点？

    分享网易云轻舟微服务选择基于 Prometheus 开发微服务监控系统的考量: 开源 云原生 与微服务监控需求的匹配度很高 开源 Prometheus是CNCF(云原生计算基金会)旗下成熟的开源项目, ...

  3. 【062新题】OCP 12c 062出现大量新题-15

    choose one In your Oracle 12c database, you plan to execute the command: SQL> CREATE TABLESPACE t ...

  4. 【文文殿下】 [USACO08MAR]土地征用 题解

    题解 斜率优化裸题. 有个很玄学的事情,就是我用\(f[i]=min\{f[j-1]+p[j].y*p[i].x\}\) 会很奇怪的Wa . 明明和\(f[i]=min\{f[j]+p[j+1].y* ...

  5. [学习笔记]Splay

    其实就是一道题占坑啦 [NOI2005]维护数列 分析: 每次操作都要 \(Splay\) 一下 \(Insert\) 操作:重建一棵平衡树,把 \(l\) 变成根,\(l+2\) 变成右子树的根,那 ...

  6. python 数据类型二 (列表和元组)

    一.列表 1.1 列表的介绍 列表是python的基本数据类型之一,其他编程语言也有类似的数据类型,比如JS中的数组,java中的数组等等,它是以[]括起来,每个元素用逗号隔开,而且可以存放各种数据类 ...

  7. 获取请求地址的IP地址

    public static String getIpAddr(HttpServletRequest request) throws Exception { String ip = request.ge ...

  8. Swift5 语言指南(二十) 类型转换

    类型转换是一种检查实例类型的方法,或者将该实例视为与其自己的类层次结构中的其他位置不同的超类或子类. Swift中的类型转换是使用is和as运算符实现的.这两个运算符提供了一种简单而富有表现力的方法来 ...

  9. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  10. 跨站请求伪造(CSRF攻击)理解

    一  概念 你这可以这么理解CSRF攻击:攻击者盗用了你的身份,以你的名义发送恶意请求.CSRF能够做的事情包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账......造成的 ...