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写的一个DIV 弹出网页对话框
Aug 14 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
js之ajax文件上传
May 13 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Django实现组合搜索的方法示例
2018/01/23 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
实现Python与STM32通信方式
2019/12/18 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
附答案的Java面试题
2012/11/19 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
公司活动策划方案
2014/01/13 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
生日寄语大全
2014/04/08 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
怎样写离婚协议书
2015/01/26 职场文书