angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

迭代器模式

迭代器模式(Iterator): 提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示。 用途:在软件构建过程中,集合对象内部结构常常变化各异。...

19410
来自专栏个人随笔

设计模式(1)

  注:本文章示例为C#代码,设计模式通用任何编程语言,可放心阅读 设计模式(3W1H)   What?针对特定问题特出的特定的解决方案   Why?让程序有更...

32211
来自专栏angularejs学习篇

js中对arry数组的各种操作小结

  最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以...

2072
来自专栏微信公众号:Java团长

JAVA之旅(一)——基本常识,JAVA概念,开发工具,关键字/标识符,变量/常量,进制/进制转换,运算符,三元运算

比如6:6/2 = 3 余 0 3 / 2 = 1 余 1 那就是从个位数开始011,读起来就是110了

1771
来自专栏angularejs学习篇

angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

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

931
来自专栏用户2442861的专栏

sizeof小览

http://blog.csdn.net/scythe666/article/details/47012347

821
来自专栏java一日一条

函数式编程的优与劣

如今函数式编程越来越流行。越来越多的编程语言支持函数式编程风格,人们学习如何使用它们。函数式编程已不像以前那么小众——现在Ruby,Java和JavaScrip...

722
来自专栏程序员互动联盟

【编程基础】聊聊C语言-第一只螃蟹

上一篇我们介绍了开发C语言需要了解的基础术语和开发C语言常用的工具做好了进行C语言编程的准备,现在我们开始操刀烹炸C语言编程世界的第一道菜-hello wor...

35413
来自专栏PHP在线

5个值得深思的 PHP 面试问题

文章所罗列的问题虽然看似简单,但是每个背后都涵盖了一个或几个大家容易忽视的基础知识点,希望能够帮助到你的面试和平时工作。 Q1 ? 正确运行的输出结果: "y...

3104
来自专栏Java3y

栈和队列就是这么简单

一、前言 上一篇已经讲过了链表【Java实现单向链表】了,它跟数组都是线性结构的基础,本文主要讲解线性结构的应用:栈和队列 如果写错的地方希望大家能够多多体谅并...

37510

扫码关注云+社区

领取腾讯云代金券