本文实例讲述了开发自定义过滤器演示。分享给大家供大家参考，具体如下：

这个基于开发的过滤器是最近做的'信息管理学院实验室预约'项目中的一个小功能。

以下为数据：

$ scope[' class ']=[{ id :1，name:'H503 '，capacity:40，software:'photoshop，金蝶，AI '，freeTime: '周一1-2-3,周五1-2-3,周一5-6 ' }，id:2，名称：'H504 '，容量：50,软件： '镀铬，金蝶，office，'，freeTime: '周二1-2-3,周三3-4,周一5-6 ' }，id:3，名称：'H505 '，容量：60,软件：'chrome，LOL，office，'，freeTime: '周二1-2-3,周三3-4,周四7-8,'}];具体功能：

分别在两个挑选选择星期和课次，列表会即时根据条件更新。

完整代码：

！DOCTYPE html html ng-app=' myApp ' hearta charset=' utf-8 '脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js '/script/head dydiv ng-controller=' myCtrl ' select ng-model=' day '所选选项=' '周一/option选项周二/option选项周三/option选项周四/option选项周五/option/select select ng-model=' ORder ' option selected=' 1-2/option 1-2-3/option 3-4/option 1-2-3-4/option 5-6/option 7-8/option/select ul Li ng-repeat=' class in class | my ITER : day : ORder ' span { { class。id } }/span span { { class。name } }/span span { { class。capacity } }/span span { { class。软件} .app.controller('myCtrl '，函数($scope) { //假数据$ scope[' class ']=[{ id :1，name:'H503 '，capacity:40，software:'photoshop，金蝶，AI '，freeTime: '周一1-2-3,周五1-2-3,周一5-6 ' }，id:2，名称：'H504 '，容量：50,软件： '镀铬，金蝶，office，'，freeTime: '周二1-2-3,周三3-4,周一5-6 ' }，id:3，名称：'H505 '，容量：60,软件：'chrome，LOL，office，'，freeTime: '周二1-2-3,周三3-4,周四7-8,'} ];//选择的默认值$ scope。订单=' 1-2 '；$scope.day='周一；});//自定义过滤器app。筛选器(' my fier '，function(){ return function(输入，日，订单){ var time=日订单；定义变量输出=[];for(var I=0；iinput.lengthI){ var n=input[I]。空闲时间。indexof(时间)；//控制台。log(n)；//console.log(输入[我]。空闲时间。charat(n时间。长度))；if(n！=-1)//如果能找到{如果(输入[我]。空闲时间。charat(n时间。长度)='，')//这样做是为了防止1-2与1-2-3是一样的结果输出。推送(输入[I])；} }返回输出；} })/脚本/正文/html运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

总结：过滤器可以理解为一个带参数的函数，它把一个对象进行一些处理，然后把处理后的对象返回。不过我认为以上的这个算法有待优化。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。