AngularJS(六)——过滤器

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建过滤器。

在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。将字符串转换成大写:{{
name | uppercase }}

内置过滤器:

1.  currency

currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。

2.  date

date 过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用

mediumDate 格式,下面的例子中展示了这个格式。

下面是内置的支持本地化的日期格式:

<span style="font-size:18px;">{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM --></span>

年份格式化

<span style="font-size:18px;">四位年份:{{ today | date:'yyyy' }} <!-- 2013 -->
两位年份:{{ today | date:'yy' }} <!-- 13 -->
一位年份:{{ today | date:'y' }} <!-- 2013 --></span>

月份格式化

<span style="font-size:18px;">英文月份:{{ today | date:'MMMM' }} <!-- August -->
英文月份简写:{{ today | date:'MMM' }} <!-- Aug -->
数字月份:{{ today |date:'MM' }} <!-- 08 -->
一年中的第几个月份:{{ today |date:'M' }} <!-- 8 --></span>

日期格式化

<span style="font-size:18px;">数字日期:{{ today|date:'dd' }} <!-- 09 -->
一个月中的第几天:{{ today | date:'d' }} <!-- 9 -->
英文星期:{{ today | date:'EEEE' }} <!-- Thursday -->
英文星期简写:{{ today | date:'EEE' }} <!-- Thu --></span>

小时格式化

<span style="font-size:18px;">24小时制数字小时:{{today|date:'HH'}} <!--00-->
一天中的第几个小时:{{today|date:'H'}} <!--0-->
12小时制数字小时:{{today|date:'hh'}} <!--12-->
上午或下午的第几个小时:{{today|date:'h'}} <!--12--></span>

分钟格式化

<span style="font-size:18px;">数字分钟数:{{ today | date:'mm' }} <!-- 09 -->
一个小时中的第几分钟:{{ today | date:'m' }} <!-- 9 --></span>

秒数格式化

<span style="font-size:18px;">数字秒数:{{ today | date:'ss' }} <!-- 02 -->
一分钟内的第几秒:{{ today | date:'s' }} <!-- 2 -->
毫秒数:{{ today | date:'.sss' }} <!-- .995 --></span>

字符格式化

<span style="font-size:18px;">上下午标识:{{ today | date:'a' }} <!-- AM -->
四位时区标识:{{ today | date:'Z' }} <!--- 0700 --></span>

3.  filter

filter 过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。例如,在做客户端搜索时,可以从一个数组中立刻过滤出所需的结果。

这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。

<span style="font-size:18px;">{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] --></span>

4.  json

json 过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助:

<span style="font-size:18px;">{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
<!--
{
"name": "Ari",
"City": "San Francisco"
}
--></span>

5.  limitTo

决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取。

例如,我们可以截取字符串的前三个字符:

<span style="font-size:18px;">{{ San Francisco is very cloudy | limitTo:3 }}
<!-- San --></span>

或最后的六个字符:

<span style="font-size:18px;">{{ San Francisco is very cloudy | limitTo:-6 }}
<!-- cloudy --></span>
<span style="font-size:18px;">
</span>

6.  lowercase

lowercase 过滤器将字符串转为小写。

<span style="font-size:18px;">{{ "San Francisco is very cloudy" | lowercase }}
<!-- san francisco is very cloudy -->
</span>

7.  number

number 过滤器将数字格式化成文本。 它的第二个参数是可选的, 用来控制小数点后截取的位数。

如果传入了一个非数字字符,会返会空字符串。

<span style="font-size:18px;">{{ 123456789 | number }}
<!-- 1,234,567,890 --></span>

8.  orderBy

orderBy 过滤器可以用表达式对指定的数组进行排序。

我们将下面的对象数组用 name 字段进行排序:

<span style="font-size:18px;">{{ [{
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name' }}
<!--
[
{"name":"Ari","status":"awake"},
{"name":"Nate","status":"awake"},
{"name":"Q","status":"sleeping"}
]
--></span>

9.  uppercase

uppercase 过滤器可以将字符串转换为大写形式:

<span style="font-size:18px;">{{ "San Francisco is very cloudy" | uppercase }}
<!-- SAN FRANCISCO IS VERY CLOUDY --></span>

自定义过滤器

也就定义一个函数,把要求写在里边,然后返回。

例如:

<span style="font-size:18px;">angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});
</span>

<span style="font-size:18px;"><!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}</span>

总结

知识积累,大家有空看看,给大家留个印象。

时间: 2024-10-15 06:53:52

AngularJS(六)——过滤器的相关文章

AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

1.切换目录,启动项目 git checkout step-9 npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3.效果: 4.代码实现: 这里主要是使用filter过滤器来进行数据过滤,这里只是在前端进行数据过滤,原始数据是不发生变化的. $filter:Filters are used for formatting data displayed to the user,格式化要显示的数据. 用法: {{ expres

AngularJs(八) 过滤器filter创建

大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:27017/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.

AngularJs自定义过滤器filter

AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点,创建一个过滤器,例子中的过滤器是实现一个数值的平方. 以上的所指的App,控制器和过滤器均是依Angularjs而言. 下面是ASP.NET MVC的视图,实现数据过滤: 程序运行结果:

angularJS的过滤器!

angularJS过滤器: filter currency date filter json limitTo lowercase number orderBy uppercase ...... Filter过滤器: 过滤器的主要用途就是一个格式化 / 筛选数据的小工具: 一般用于服务端存储的数据转换为用户界面可以理解的数据: 常见需要使用Filter的数据有: - 时间 1288323623006 currency:它是用来过滤货币: 作用把数字过滤成 一个货币: 使用:竖杠+过滤器名称 <di

走进AngularJs(七) 过滤器(filter) - 吕大豹

时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).

AngularJS开发指南13:AngularJS的过滤器详解

AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化.你可以向下面这样使用链式的过滤器来传递表达式: name | uppercase 这个表达式执行时会将name的值传递给uppercase过滤器. 写一个你自己的过滤器非常容易:在你的模块中注册一个新的过滤器(可注入的)工厂函数就行了.这个工厂函数必须返回一个新的过滤器函数,这个过滤函数的第一个参

AngularJS 自定义过滤器Filter 问题

在网上看了很多angularJS过滤器的文章,但是觉得写的比较模糊,之前试了好几次都不成功,这次成功了记录一下. App.filter('deployFilter',function(){ return function(value){ switch (value){ case 'UNDEPLOY' : value = '未部署'; break; case 'DEPLOYED' : value = '已部署'; break; default : break; } return value; }

创建 AngularJS 自定义过滤器,带自定义参数

Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): <tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'"> 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是

AngularJS之过滤器

AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器: {{ name | uppercase }} 在JavaScript代码中可以通过$filter来调用过滤器.例如,在JavaScript代码中使用lowercase过滤器: app.controller('DemoController'

AngularJS 之 过滤器 Filter

一.内置过滤器 1.大小写转换: uppercase.lowercase {{"lower cap string"| uppercase }} {{"Tank Is GOOD"| lowercase}} 2.json格式化(将对象转换成json字符串),默认输出就是json字符串: {{ {name:'zhangsan',age:15} }} {{ {name:'zhangsan',age:15}|json }} 3.number格式化: {{1.2345|numb