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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
破解Session cookie的方法
2006/07/28 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
对javascript继承的理解
2016/10/11 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
javascript实现计算器功能
2020/03/30 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
大专应届生个人简历的自我评价
2013/10/15 职场文书
写自荐信的七个技巧
2013/10/15 职场文书
如何做好总经理助理
2013/11/12 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
总经理致辞
2015/07/29 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android