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的IE和Firefox兼容性汇编
Jul 01 Javascript
我见过最全的个人js加解密功能页面
Dec 12 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
js密码强度实时检测代码
Mar 02 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
sharp.js安装过程中遇到的问题总结
Apr 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/04/11 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
关于python 跨域处理方式详解
2020/03/28 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
自我鉴定书
2014/03/24 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
兴趣班停课通知
2015/04/24 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang