angularjs 过滤器filter

在前面介绍angularjs已经很多了，中途由于工作和一切生活琐事，暂停了很久。今天在这里将继续angularjs讲解，这节我们来看看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/12/

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

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

转载于:https://blog.51cto.com/whitewolfblog/1045817

angularjs 过滤器filter相关推荐

angularjs过滤器(number)
angularjs过滤器number,用来精确浮点数用来精确浮点数,指定小数点位数. 在html中用法 {{ number_expression | number : fractionSize}} ...
----------------------过滤器filter简单登录和乱码过滤----
web.xml里面的代码 <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...
⑧javaWeb之在例子中学习（过滤器Filter）
前言本系列 Servlet & JSP 学习系列[传送门]逐渐到了中期了,希望大家喜欢我写的,总结的点点滴滴- 今天我们来讲讲过滤器你们的支持是我写博客的动力哦. 最近买了两本书,觉得大二 ...
一场由过滤器Filter引发的血案
一场由过滤器Filter引发的血案事件起因本来应该是下图的登录界面变成了这样 What's the fuck????? 抓狂原因解决方法: 在过滤器中给资源文件开个绿色通道
Java web—Servlet过滤器(Filter)
前言: 过滤器是Servlet中一个非常重要的组成部分,进行WEB开发时无不用到过滤器:因此这篇blog来单独总结下关于过滤器的知识点. 一.首先来了解一下什么是过滤器: 下面这句话引 ...
ITK:过滤器Filter和ParallelizeImageRegion比较
ITK:过滤器Filter和ParallelizeImageRegion比较内容提要输出结果 C++实现代码内容提要本示例演示如何利用MultiThreaderBase :: Parallel ...
ITK:复制过滤器filter
ITK:复制过滤器filter 内容提要输出结果 C++实现代码内容提要复制/复制过滤器输出结果 2 C++实现代码 #include "itkAbsImageFilter.h&qu ...
【若依(ruoyi)】shiro 内置的过滤器(filter)
前言 shiro: 1.5.3 若依(ruoyi): v4.3 (测试shiro的环境) shiro 内置的过滤器(filter) Filter Name Class anon org.apache. ...
Springmvc中的拦截器interceptor及与过滤器filter的区别
一.Springmvc中的拦截器概述及与过滤器filter的区别 1).Springmvc中的拦截器interceptor用于对控制器controller进行预处理和后处理的技术; 2).可以定义拦截 ...

angularjs 过滤器filter

angularjs 过滤器filter相关推荐

最新文章

热门文章