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 相关文章推荐
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JavaScript File分段上传
Mar 10 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
js禁止表单重复提交
Aug 29 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
原生JavaScript实现留言板
Jan 10 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自动加载的两种实现方法
2010/06/21 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
八一慰问活动方案
2014/02/07 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年检验员工作总结
2014/11/19 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
党章学习心得体会2016
2016/01/14 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript