博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs 过滤器filter
阅读量:6517 次
发布时间:2019-06-24

本文共 1408 字,大约阅读时间需要 4 分钟。

      在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久。今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter。

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

      如下实例:

html:

 1 
<
div 
ng-app
="app"
 ng-controller
="test"
>
 2 num:
<
input 
ng-model
="num"
 
/>
 3 
<
br
/>
 4 {
{num | number}}
 5 
<
br
/>
 6 {
{num | number:2}}
 7 
<
br
/>
 8 first name:
<
input 
ng-model
="person.first"
/>
 9 
<
br
/>
10 last name:
<
input 
ng-model
="person.last"
/>
11 
<
br
/>
12 name: {
{person | fullname}}
13     
<
br
/>
14 name: {
{person | fullname:"- -"}}
15        
<
br
/>
16 name: {
{person | fullname:" " | uppercase }}
17 
</
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效果:

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

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

作者: 
出处: 
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-、和。http://www.cnblogs.com/whitewolf/archive/2012/10/31/2748920.html

你可能感兴趣的文章
第22章,mysql数据库-1
查看>>
【亲测】教你如何搭建 MongoDB 复制集 + 选举原理
查看>>
虚拟化网络技术
查看>>
阿里云中间件推出全新开发者服务
查看>>
56.随机产生的id重复问题
查看>>
一个快速检测系统CPU负载的小程序
查看>>
java.lang.IllegalArgumentException: No bean specified
查看>>
Wireshark and Tcpdump tips
查看>>
第一课 计算机及操作系统基础知识
查看>>
windows2003单域迁移到2008R2服务器
查看>>
cacti相关资料网站
查看>>
我的友情链接
查看>>
浅析:Android--Fragment的懒加载
查看>>
Linux操作系统目录和Linux常用的文件和目录管理命令
查看>>
DIY:自己动手做一个迷你 Linux 系统(二)
查看>>
猫猫学IOS(三十)UI之Quartz2D画图片画文字
查看>>
ethereumjs/merkle-patricia-tree-2-API
查看>>
go标准库的学习-runtime
查看>>
pytorch Debug —交互式调试工具Pdb (ipdb是增强版的pdb)-1-使用说明
查看>>
NodeJS学习之文件操作
查看>>