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 相关文章推荐
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
node事件循环和process模块实例分析
Feb 14 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打造属于自己的MVC框架
2012/03/07 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python函数返回值实例分析
2015/06/08 Python
Python实现telnet服务器的方法
2015/07/10 Python
python的变量与赋值详细分析
2017/11/08 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Django组件cookie与session的具体使用
2019/06/05 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
高中课程设置方案
2014/05/28 职场文书
创优争先心得体会
2014/09/11 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
第一节英语课开场白
2015/06/01 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python