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>
好了，时间也不早了，明天还要上班，今天就先学到这，明天继续学习表单验证，谢谢大家支持与鼓励。
angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）的更多相关文章
- angularjs学习第五天笔记（第二篇：表单验证升级篇）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Elasticsearch7.X 入门学习第三课笔记----search api学习（URI Search）
原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...
- Spring Cloud Alibaba学习笔记（19） - Spring Cloud Gateway 自定义过滤器工厂
在前文中,我们介绍了Spring Cloud Gateway内置了一系列的内置过滤器工厂,若Spring Cloud Gateway内置的过滤器工厂无法满足我们的业务需求,那么此时就需要自定义自己的过 ...
- iOS阶段学习第三天笔记（运算符）
iOS学习(C语言)知识点整理笔记 1.运算符 一.算术运算符 1)表达式由变量.常量.运算符构成,有确定的类型和值 2)算术运算符包括: +(加),-(减),*(乘),/(除),%(模) 3)算术运 ...
- angularjs学习第七天笔记（系统指令学习）
您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...
- iOS 阶段学习第三天笔记（运算符）
iOS学习(C语言)知识点整理笔记 1.运算符 一.算术运算符 1)表达式由变量.常量.运算符构成,有确定的类型和值 2)算术运算符包括: +(加),-(减),*(乘),/(除),%(模) 3)算术运 ...
- angularJS学习（三）——搭建学习环境
1.安装Node.js 和Testacular 1.1. 安装Node.js及配置部分,在另一篇博文:node.js的安装里面讲到了,地址是:http://www.cnblogs.com/tianxu ...
- Python学习笔记【第二篇】：运算符、比较、关系运算符
运算符 python支持以下几种运算符 算术运算符 运算符 描述 实例 + 加 两个对象相加 a + b 输出结果 30 - 减 得到负数或是一个数减去另一个数 a - b 输出结果 -10 * 乘 ...
随机推荐
- XML随笔：语法快速入门及当下流行的RSS简析
今天是本人第一次写博客,之前闭门造车闹出过很多笑话,恰巧这几天刚刚重温了一遍XML的知识,决定把XML的知识再来从头到尾的理一遍,感触颇多,今天分享给大家.希望大家能多多注意其中的要点. 1.定义 首 ...
- Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满屏幕
Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满 ...
- Python基础 --函数的参数
定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复杂逻辑被封装起来,调用者无需了解 ...
- nginx在Linux下的安装
安装之前的环境装备: 1.ngiinx 是C 语言开发的,我们上传的文件还是源码,需要gcc环境编译源码 : yum install gcc-c++ 2.nginx的http模块使用pcre来解析正则 ...
- 自己动手python打造渗透工具集
难易程度:★★★阅读点:python;web安全;文章作者:xiaoye文章来源:i春秋关键字:网络渗透技术 前言python是门简单易学的语言,强大的第三方库让我们在编程中事半功倍,今天我们就来谈谈 ...
- [JavaScript] iframe更改了src后，父页面history.back只能后退iframe而不能使自己后退解决办法
浏览器的机制如此,在iframe导航变化后手动点击浏览器的后退按钮也依然只是后退iframe中的导航. 有一种解决方案是不要修改iframe.src,而是删除旧iframe元素,新建一个iframe元 ...
- django-子项目
当我们开始做一个项目的时候 ,当我们做的项目越来越大的时候py文件已经不足以分担 并且看起来不清晰 所以我们需要 新建一个子项目 这样的话可以方便管理 我们要建立子项目的话先进入那个项目的文件 ...
- 彻底弄懂“PKIX path building failed”问题
SSL的基础知识 SSL的全称是Secure Socket Layer.它的通信流程如下图所示,客户端与服务端会通过几次通信,通过非对称加密创建出一个加密密钥,用于以后的对称信息加密. 1,客户端明文 ...
- 设置多台机器linux服务器ssh相互无密码访问
在每台服务器上都执行ssh-keygen -t rsa生成密钥对: $ ssh-keygen -t rsa Generating public/private rsa key pair. Enter ...
- android stdio 编译项目报Error:Failed to find target with hash string 'android-24
android stdio 编译项目报Error:Failed to find target with hash string 'android-24 查看已有的SDK 设置项目的sdk为 25 an ...