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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
微信小程序实现多图上传
Jun 19 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 5.0 Pear安装方法
2006/12/06 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
简明json介绍
2008/09/28 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
js实现日历
2020/11/07 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python正则表达式完全指南
2017/05/25 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
为什么说python更适合树莓派编程
2020/07/20 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
党员批评与自我批评范文
2014/09/23 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
综合素质自我评价评语
2015/03/06 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python