深入理解angularjs过滤器


Posted in Javascript onMay 25, 2016

•在html文件中和在js文件中使用

$scope.form_time = $filter('date')($scope.time, 'yyyy-MM-dd HH:mm:ss');

<p>{{time | date: 'yyyy-MM-dd HH:mm:ss'}}</p>

•内部过滤器和自定义过滤器

.filter('my_data_format',[function(){
  return function(data,str,sss){
    console.log('data: ',data,' str: ',str,' sss: ',arguments[2]);
  }
}]);
//var1就是第一个参数data, 123是第二个参数str, this是第三个参数
<p>{{var1 | my_data_format : 123 : 'this'}}</p>


//对传入的数据进行处理
.filter('my_data_format',[function(){
  return function(data,str){
    var arr=[];
    angular.forEach(data, function(one_list){
      if(one_list.status == str){
        arr.push(one_list);
      }
    });
    return arr;
  }
}]);
//过滤器可以用在绑定的值中,也可以用在ng-if="(lists | my_data_format: '2').length>0", 和ng-show等;类似的表达式中。作为判断语句
<p ng-repeat = "list in lists">姓名:{{list.name}},人数{{(lists | my_data_format: '2').length}}</p>

以上这篇深入理解angularjs过滤器就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 #Javascript
jQuery each函数源码分析
May 25 #Javascript
jQuery中的each()详细介绍(推荐)
May 25 #Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 #Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 #Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 #Javascript
You might like
php调用KyotoTycoon简单实例
2015/04/02 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Eval and new funciton not the same thing
2012/12/27 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python 统计字数的思路详解
2018/05/08 Python
python和shell获取文本内容的方法
2018/06/05 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
创意婚礼策划方案
2014/05/18 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
发布会邀请函
2015/01/31 职场文书
中标通知书
2015/04/17 职场文书