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 相关文章推荐
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
javascript实现简易聊天室
Jul 12 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
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python程序退出方式小结
2017/12/09 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python+pyqt5编写md5生成器
2019/03/18 Python
如何基于python生成list的所有的子集
2019/11/11 Python
对python中各个response的使用说明
2020/03/28 Python
python实现学生管理系统开发
2020/07/24 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
节能减排倡议书
2014/04/15 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
高三语文复习计划
2015/01/19 职场文书
Redis 哨兵机制及配置实现
2022/03/25 Redis
python获取字符串中的email
2022/03/31 Python