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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
node.js事件轮询机制原理知识点
Dec 22 Javascript
微信小程序实现文件预览
Oct 22 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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和MySQL保存和输出图片
2006/10/09 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Stop SQL Server
2007/06/21 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
快速了解python leveldb
2018/01/18 Python
Python多继承顺序实例分析
2018/05/26 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python os模块简单应用示例
2019/05/23 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
什么是python的id函数
2020/06/11 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
C语言编程题
2015/03/09 面试题
致铅球运动员加油稿
2014/02/13 职场文书
上课打牌的检讨书
2014/02/15 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
Python如何用re模块实现简易tokenizer
2022/05/02 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android