angularjs自定义过滤器demo示例


Posted in Javascript onAugust 24, 2019

本文实例讲述了angularjs自定义过滤器demo。分享给大家供大家参考,具体如下:

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

以下为数据:

$scope['classes']=[{id:1,name:"H503",capacity:40,software:"photoshop,金蝶,AI",freeTime:"周一1-2-3,周五1-2-3,周一5-6,"},
   {id:2,name:"H504",capacity:50,software:"chrome,金蝶,office,"
   ,freeTime:"周二1-2-3,周三3-4,周一5-6,"},
   {id:3,name:"H505",capacity:60,software:"chrome,LOL,office,"
   ,freeTime:"周二1-2-3,周三3-4,周四7-8,"}
];

具体功能:

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

完整代码:

<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
 <select ng-model="day">
  <option selected="">周一</option>
  <option>周二</option>
  <option>周三</option>
  <option>周四</option>
  <option>周五</option>
 </select>
  <select ng-model="order">
  <option selected="">1-2</option>
  <option>1-2-3</option>
  <option>3-4</option>
  <option>1-2-3-4</option>
  <option>5-6</option>
  <option>7-8</option>
  </select>
  <ul>
   <li ng-repeat="class in classes | myFiter:day:order">
     <span>{{class.id}}</span>
     <span>{{class.name}}</span>
      <span>{{class.capacity}}</span>
      <span>{{class.software}}</span>
   </li>
  </ul>
 </select>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 //假数据
  $scope['classes']=[{id:1,name:"H503",capacity:40,software:"photoshop,金蝶,AI",freeTime:"周一1-2-3,周五1-2-3,周一5-6,"},
   {id:2,name:"H504",capacity:50,software:"chrome,金蝶,office,"
   ,freeTime:"周二1-2-3,周三3-4,周一5-6,"},
   {id:3,name:"H505",capacity:60,software:"chrome,LOL,office,"
   ,freeTime:"周二1-2-3,周三3-4,周四7-8,"}
  ];
  //select的默认值
  $scope.order="1-2";
  $scope.day="周一";
});
//自定义过滤器
app.filter('myFiter',function()
{
 return function(input,day,order)
 {
   var time=day+order;
   var output=[];
   for(var i=0;i<input.length;i++)
   {
   var n=input[i].freeTime.indexOf(time);
   // console.log(n);
   // console.log(input[i].freeTime.charAt(n+time.length));
    if(n!=-1)//如果能找到
    {
     if(input[i].freeTime.charAt(n+time.length)==',')
     //这样做是为了防止1-2与1-2-3是一样的结果
      output.push(input[i]);
    }
   }
   return output;
 }
})
</script>
</body>
</html>

运行效果:

angularjs自定义过滤器demo示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
微信小程序class封装http代码实例
Aug 24 #Javascript
微信小程序前端promise封装代码实例
Aug 24 #Javascript
node获取客户端ip功能简单示例
Aug 24 #Javascript
js针对图片加载失败的处理方法分析
Aug 24 #Javascript
js prototype和__proto__的关系是什么
Aug 23 #Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 #Javascript
You might like
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
MVVM 双向绑定的实现代码
2018/06/21 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
解析python实现Lasso回归
2019/09/11 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
增员口号大全
2014/06/18 职场文书
小学生读书活动总结
2014/06/30 职场文书
教师节活动总结
2014/08/29 职场文书
地道战观后感400字
2015/06/04 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android