Angularjs过滤器使用详解


Posted in Javascript onMay 25, 2016

给大家介绍下什么是 AngularJS?

AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用?数据绑定?和?依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

AngularJS提供了过滤器来对输入输出数据格式化。下面开始给大家介绍Angularjs过滤器使用,一起看看吧

•在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>
Javascript 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
微信小程序如何访问公众号文章
Jul 08 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
jQuery限制图片大小的方法
May 25 #Javascript
jQuery中设置form表单中action值的实现方法
May 25 #Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 #Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 #Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 #Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 #Javascript
BootStrap的Datepicker控件使用心得分享
May 25 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
浅析Python 多行匹配模式
2020/07/24 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
出纳岗位职责范本
2013/12/01 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
鲜花方阵解说词
2014/02/13 职场文书
商业融资计划书
2014/04/29 职场文书
大学体育课感想
2015/08/10 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
浅谈Redis缓冲区机制
2022/06/05 Redis
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers