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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
js保留两位小数方法总结
Jan 31 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 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
香妃
2021/03/03 冲泡冲煮
php google或baidu分页代码
2009/11/26 PHP
PHP对象相关知识总结
2017/04/09 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python中append函数用法讲解
2020/12/11 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
个人能力自我鉴赏
2014/01/25 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2015年人事科工作总结
2015/04/28 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript