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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
JavaScript基础之this详解
Jun 04 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
详解pandas映射与数据转换
2021/01/22 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
教师学习培训邀请函
2014/02/04 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers