深入理解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 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
js实现左右两侧浮动广告
Jul 09 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
Vue脚手架的简单使用实例
2018/07/10 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
一份python入门应该看的学习资料
2018/04/11 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
python requests使用socks5的例子
2019/07/25 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
会计个人实习计划书
2014/08/15 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书