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>
好了，时间也不早了，明天还要上班，今天就先学到这，明天继续学习表单验证，谢谢大家支持与鼓励。
END
上面整理了一些在实际业务开发中遇到的关于页面加载慢的排查和解决的方法。后面还会越来月丰富起来，如果你的项目有可能遇到打开慢的情况，不妨点赞收藏一下～。
END
为了更高的交流，欢迎大家关注我的公众号，扫描下面二维码即可关注，谢谢：
