AngularJS过滤器filter用法实例分析


Posted in Javascript onNovember 04, 2016

本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考,具体如下:

这节我们来看看angularjs的过滤器filter。

在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。

如下实例:

html:

<div ng-app="app" ng-controller="test">
num:<input ng-model="num" />
<br/>
{{num | number}}
<br/>
{{num | number:2}}
<br/>
first name:<input ng-model="person.first"/>
<br/>
last name:<input ng-model="person.last"/>
<br/>
name: {{person | fullname}}
  <br/>
name: {{person | fullname:"- -"}}
    <br/>
name: {{person | fullname:" " | uppercase }}
</div>

js:

function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
  var filterfun = function(person, sep) {
    sep = sep || " ";
    person = person || {};
    person.first = person.first || "";
    person.last = person.last || "";
    return person.first + sep + person.last;
  };
  return filterfun;
});

​jsfiddle效果:http://jsfiddle.net/whitewolf/uCPPK/9/

在实例中首先演示了angularjs自带的number的filter使用。再同样为我们样式了如何去创建一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得自然

最后说明:angularjs filters支持链式写法,如何powershell或者其他操作系统外壳语言一样的管道式模型,形如 value | filter1 | filter2。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
JS实现瀑布流效果
Mar 07 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 #Javascript
Angular页面间切换及传值的4种方法
Nov 04 #Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 #Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 #Javascript
javascript设置文本框光标的方法实例小结
Nov 04 #Javascript
使用Curl命令查看请求响应时间方法
Nov 04 #Javascript
JS创建对象的写法示例
Nov 04 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php中动态调用函数的方法
2015/03/16 PHP
php实现对象克隆的方法
2015/06/20 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
详解Python中for循环是如何工作的
2017/06/30 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python如何保存文本文件
2020/06/07 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
森林防火标语
2014/06/23 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python