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 解析json的代码
Dec 16 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue时间格式化实例代码
Jun 13 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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生成缩略图的函数代码(修改版)
2011/01/18 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Yii2如何批量添加数据
2016/05/17 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
javascript 中null和undefined区分和比较
2017/04/19 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python如何实现定时器功能
2020/05/28 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
平面设计师的工作职责
2013/11/21 职场文书
爱情检讨书大全
2014/01/21 职场文书
给校长的一封建议书
2014/03/12 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
银行自荐信怎么写
2015/03/05 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python