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 无提示关闭窗口脚本
Aug 17 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
webpack实用小功能介绍
Jan 02 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
实例讲解vue源码架构
Jan 24 Javascript
js实现自动播放匀速轮播图
Feb 06 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连接MYSQL成功与否的代码
2013/08/16 PHP
php自定文件保存session的方法
2014/12/10 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP时间类完整代码实例
2021/02/26 PHP
不安全的常用的js写法
2009/09/15 Javascript
javascript event 事件解析
2011/01/31 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python获取地震信息 微信实时推送
2019/06/18 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
中国梦的演讲稿
2014/01/08 职场文书
商业街策划方案
2014/05/31 职场文书
一年级小学生评语大全
2014/12/25 职场文书
清明节寄语2015
2015/03/23 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android