AngularJS的内置过滤器详解
投稿：hebedich
字体：[ ] 类型：转载 时间：
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。
今天我们来了解一下AngularJS的内置过滤器
先来看看这些内置过滤器使用方法:
一个过滤器，不带参数的情况
{{expression | filter}}
一个过滤器，带参数的情况
{{expression | filter:arguments}}
一个过滤器，带多个参数的情况
{{expression | filter: arg1: arg2: ...}}
多个过滤器，不带参数的情况
{{expression | filter1 | filter2 | ...}}
下面我们分别使用以下AngularJS的内置过滤器
currency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。
可以这样使用：{{ 3600 | currency: "$￥"}}
返回结果为$￥123.00
number过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数
如果传入的是一个非数字字符，会返回空字符串
可以这样使用：{{ 3600 | number:2}}
返回结果为：3,600.00
lowercase将字符串转换为小写
可以这样使用：{{ "HEllo" | lowercase}}
返回结果为：hello
uppercase将字符串转换为大写
可以这样使用：{{ "HEllo" | uppercase}}
返回结果为：HELLO
json过滤器可以将一个JSON或者JavaScript对象转换成字符串。
这个过滤器对调试相当有用
可以这样使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为：{ "name": "dreamapple", "language": "AngularJS" }
date过滤器将日期过滤成你想要的格式，这个实在是很好的过滤器。
这个过滤器用法很多我这里列举几种常用的
{{ today | date: "yyyy - mm - dd"}}
结果为：2015 - 15 - 13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
结果为：2015 - 18 - 13 20:18::38
[online code](2015 - 18 - 13 20:18::38)
还有三个内置的过滤器，但是使用稍微复杂一点，放在下一篇文章中我们大家一起探讨吧
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具相关文章推荐:
js过滤非法字符
一、过滤器的作用
过滤器用来格式化需要展示给用户的数据。
在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串转换成大写可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器：{{name | uppercase }}
◇给过滤器传参数：
&h3&货币格式&/h3&
{{123|currency}}
&H3&小数位数&/H3&
{{123.3213132|number:2}}
阅读（30） 回复（0）
其他文章推荐
如果你使用的 Spring 版本是 4.1，并且使用 Jackson 处理 json 序列化，那么解决这个问题非常简单。&br style=&padding:0margin:0line-height:white-space:& /&
以你问题中的例子举例：&br style=&padding:0margin:0line-height:white-space:& /&
Jackson 提供了2种注解来控制 Property 是否包含在序列化的 json 中。&br /&
&div class=&codeheads&&
点击(&span style=&c...
阅读（0） 回复（0）
json 数据中的String 传递数据时，需要处理好特殊字符.
json数据中有特殊字符:
1：引号 ，如果是使用单引号，来括值的话，那String 中
单引号为特殊字符
2：正斜杠，反斜杠，换行符号等。另外，必须用 (&) 而非 (') 表示字符串：
* jsON字符串特殊字符处理，比如：“\A1;1300”
* @param s
* @return String
public String string2json(String s) {...
Android平台
阅读（60） 回复（0）
一、工具类实现代码
点击(此处)折叠或打开
package com.allthelucky.js
import java.lang.reflect.F
import java.lang.reflect.ParameterizedT
import java.util.ArrayL
import java.util.HashM
import java.util.L
import java.util.M
import org...
Android平台
阅读（540） 回复（0）
js在前端浏览器执行
页面上也可以看到js的源码
js中的变量定义由var开头
js也有一个基础库jquery-1.11.2.min.js
js是也算是页面的原生语言,可访问html中的元素
js一般是用来读取页面上的数据,php主要是生成页面上的数据
js可使用ajax与后台的php交互
js也有一些常见的函数
js内置变量
JavaScript
阅读（0） 回复（0）
cookie机制：能在浏览器端保存数据,cookie文件的大小是有限制的，具体限制据不同浏览器不一样；
cookie有效期：通过expires设置保存的有效期，其单位是“天”；
cookie分两种：一种保存在浏览器缓存里（写入cookie时没有设置失效时间）；
一种保存在浏览器硬盘里（写入cookie时设置了失效时间）；
insertBefore(...
阅读（0） 回复（0）
1.document.write(&&); 输出语句
2.js中的注释为//
3.传统的HTML文档顺序是:document-&html-&(head,body)
4.一个浏览器窗口中的DOM顺序是:window-&(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById(&表单中元素的ID号&).name(或value)
6.一个小写转大写的js: document.getElementById(&output&).value =
document.getElementById(&input&).value.toUpperCase();
7.js中的值类型:...
JavaScript
阅读（30） 回复（0）
&span style=&font-family:'Microsoft YaHei', Verdana, sans-serif, SimSfont-size:14line-height:22white-space:background-color:#FFFFFF;&&有些model，里面很多属性是null，我们希望过滤掉为null的属性，比如 a = null, b = &kk&，传递到前台的只有{&b&:&kk&}&br /&
&div class=&codeheads&&
点击(&span style=&cursor:color:& onclick=&code_hide('code58...
阅读（0） 回复（0）
使用java操作mongodb经常需要把DBObject对象转换成json字符串，或反过来到json字符串转换成DBObject对象保存
如果要准确选择一个对象最准确的方法是直接根据期objectid进行查找，以下例子讲述这些用法。
方法一、利用json字符串直接生成mongodb的 DBObject对象
例子中的json字符串是利用DBObject的toString()方法生成的,json的官方要求是使用双引号，如果要严格办事，那么必把json串的的&用转义字符\&替换。
点击(此...
阅读（0） 回复（0）
&span style=&font-family:'Helvetica Neue', Helvetica, Arial, sans-font-size:14line-height:29white-space:background-color:#FDFFFF;&&&由于js是在客户端解释型的语言，所以很容易就可以通过浏览器查看到js写的源代码。这样，就有了加密js的需求。（其实这里的加密只是一种说法，从下面我们可以看出来其实没有起到加密的作用，只是把源代码做了一定的处理达到了无法直接阅读的目的）此外，...
阅读（0） 回复（0）
& & 1.jsp技术&br /&
& & & & jsp是sun提供动态web资源开发技术。为了解决在Servlet中拼写html内容css、js内容十分不方便的问题，sun提供了这样一门技术。如果说Servlet是在java中嵌套HTML，则jsp就是在HTML中嵌套java代码,从而十分便于组织html页面&br /&
& & & &&&br /&
& & & & jsp页面在第一次被访问到时会被jsp翻译引擎翻译成一个Servlet,从此对...
阅读（0） 回复（0）
盛拓传媒：
北京皓辰网域网络信息技术有限公司. 版权所有
北京市公安局海淀分局网监中心备案编号：
广播电视节目制作经营许可证：编号（京）字第1149号
ITPUB推荐文章解答你所有技术难题在这一步你将学习到如何创建自己的显示过滤器。
请重置工作目录：
git checkout -f step-9
现在转到一个手机详细信息页面。在上一步，手机详细页面显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化：√作为“true”；以及×作为“false”。来让我们看看过滤器代码长什么样子。
步骤8和步骤9之间最重要的不同在下面列出。你可以在里看到完整的差别。
定制过滤器
为了创建一个新的过滤器，先创建一个phonecatFilters模块，并且将定制的过滤器注册给这个模块。
app/js/filters.js
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
我们的过滤器命名为checkmark。它的输入要么是true，要么是false，并且我们返回两个表示true或false的unicode字符（\u2713和\u2718）。
现在我们的过滤器准备好了，我们需要将我们的phonecatFilters模块作为一个依赖注册到我们的主模块phonecat上。
app/js/app/js
angular.module('phonecat', ['phonecatFilters']).
由于我们的模板代码写在app/js/filter.js文件中，所以我们需要在布局模板中引入这个文件。
app/index.html
&script src=&js/controllers.js&&&/script&
&script src=&js/filters.js&&&/script&
在AngularJS模板中使用过滤器的语法是：
{{ expression | filter }}
我们把过滤器应用到手机详细信息模板中：
app/partials/phone-detail.html
&dt&Infrared&/dt&
&dd&{{phone.connectivity.infrared | checkmark}}&/dd&
&dt&GPS&/dt&
&dd&{{phone.connectivity.gps | checkmark}}&/dd&
过滤器和其他组件一样，应该被测试，并且这些测试实际上很容易完成。
test/unit/filtersSpec.js
describe('filter', function() {
beforeEach(module('phonecatFilters'));
describe('checkmark', function() {
it('should convert boolean values to unicode checkmark or cross',
inject(function(checkmarkFilter) {
expect(checkmarkFilter(true)).toBe('\u2713');
expect(checkmarkFilter(false)).toBe('\u2718');
注意在执行任何过滤器测试之前，你需要为phonecatFilters模块配置我们的测试注入器。
执行./scripts/test/sh运行测试，你应该会看到如下的输出：
Chrome: Runner reset.
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
现在让我们来练习一下，在index.html中加入如下绑定：
{{ &lower cap string& | uppercase }}
{{ {foo: &bar&, baz: 23} | json }}
{{ 4 | date }}
{{ 4 | date:&MM/dd/yyyy @ h:mma& }}
我们也可以用一个输入框来创建一个模型，并且将之与一个过滤后的绑定结合在一起。在index.html中加入如下代码：
&input ng-model=&userInput&& Uppercased: {{ userInput | uppercase }}
现在你已经知道了如何编写和测试一个定制化插件，在中我们会学习如何用AngularJS继续丰富我们的手机详细信息页面。
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
input 是干嘛的？