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 相关文章推荐
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
node.js命令行教程图文详解
May 27 Javascript
Paypal支付不完全指北
Jun 04 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
获取URL文件名后缀
2013/10/24 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
微信小程序网络请求实现过程解析
2019/11/06 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
python中定义结构体的方法
2013/03/04 Python
python中__call__内置函数用法实例
2015/06/04 Python
在Django中创建第一个静态视图
2015/07/15 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
小学生红领巾广播稿
2014/01/21 职场文书
合作协议书范本
2014/04/17 职场文书
领导班子整改方案
2014/10/25 职场文书
单位委托函范文
2015/01/29 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
学生会部长竞选稿
2015/11/19 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电