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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python中round函数如何使用
2020/06/19 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
机电专业大学生职业规划书范文
2014/02/25 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
护理专业自荐信范文
2015/03/06 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
毕业实习单位意见
2015/06/04 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技