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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
Vue基础配置讲解
Nov 29 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
77A一级收信机修理记
2021/03/02 无线电
第六节 访问属性和方法 [6]
2006/10/09 PHP
php基础知识:函数基础知识
2006/12/13 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
基于jquery.page.js实现分页效果
2018/01/01 jQuery
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
如何验证python安装成功
2020/07/06 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
提拔干部考察材料
2014/05/26 职场文书
低碳环保口号
2014/06/12 职场文书
公司演讲稿开场白
2014/08/25 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
英文感谢信范文
2015/01/21 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android