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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
常用的js方法合集
Mar 10 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JS阻止事件冒泡的方法详解
Aug 26 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
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
详解python中的线程
2018/02/10 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python构造函数init实例方法解析
2020/01/19 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
事业单位接收函
2014/01/10 职场文书
社区中秋节活动方案
2014/01/29 职场文书
职工代表大会主持词
2014/04/01 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python
Python使用Web框架Flask开发项目
2022/06/01 Python