AngularJS 内置过滤器

1. currency

  currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化成货币格式。
  currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,但是也可以自定义货币符号。

  {{1000 | currency }} <!-- $1,000.00 -->
  {{1000 | currency:"RMB ¥" }} <!-- RMB ¥1,000.00 -->

2. date

  date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用mediumDate格式,下面的例子中展示了这个格式。
  下面是内置的支持本地化的日期格式:

  {{ 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 -->

  年份格式化

  四位年份:{{ today | date:‘yyyy‘ }} <!-- 2013 -->
  两位年份:{{ today | date:‘yy‘ }} <!-- 13 -->
  一位年份:{{ today | date:‘y‘ }} <!-- 2013 -->

  月份格式化

  英文月份:{{ today | date:‘MMMM‘ }} <!-- August -->
  英文月份简写:{{ today | date:‘MMM‘ }} <!-- Aug -->
  数字月份:{{ today |date:‘MM‘ }} <!-- 08 -->
  一年中的第几个月份:{{ today |date:‘M‘ }} <!-- 8 -->

  日期格式化

  数字日期:{{ today|date:‘dd‘ }} <!-- 09 -->
  一个月中的第几天:{{ today | date:‘d‘ }} <!-- 9 -->
  英文星期:{{ today | date:‘EEEE‘ }} <!-- Thursday -->
  英文星期简写:{{ today | date:‘EEE‘ }} <!-- Thu -->

  小时格式化

  24小时制数字小时:{{today|date:‘HH‘}} <!--00-->
  一天中的第几个小时:{{today|date:‘H‘}} <!--0-->
  12小时制数字小时:{{today|date:‘hh‘}} <!--12-->
  上午或下午的第几个小时:{{today|date:‘h‘}} <!--12-->

  分钟格式化

  数字分钟数:{{ today | date:‘mm‘ }} <!-- 09 -->
  一个小时中的第几分钟:{{ today | date:‘m‘ }} <!-- 9 -->

  秒数格式化

  数字秒数:{{ today | date:‘ss‘ }} <!-- 02 -->
  一分钟内的第几秒:{{ today | date:‘s‘ }} <!-- 2 -->
  毫秒数:{{ today | date:‘.sss‘ }} <!-- .995 -->

  字符格式化

  上下午标识:{{ today | date:‘a‘ }} <!-- AM -->
  四位时区标识:{{ today | date:‘Z‘ }} <!--- 0700 -->

  下面是一些自定义日期格式的示例:

  {{ today | date:‘MMMd, y‘ }} <!-- Aug9, 2013 -->
  {{ today | date:‘EEEE, d, M‘ }} <!-- Thursday, 9, 8-->
  {{ today | date:‘hh:mm:ss.sss‘ }} <!-- 12:09:02.995 -->

3.number

  {{ 3.1415926 | number:1 }} <!-- 3.1 -->
  {{ 3.1415926 | number:2 }} <!-- 3.14 -->
  {{ -3.1415926 | number:2 }} <!-- -3.14 -->
  {{ 3 | number:2 }} <!-- 3.00 -->
  {{ 0.002 | number:2 }} <!-- 0.00 -->
  {{ 0.009 | number:2 }} <!-- 0.01 -->
  {{100 | number}} <!-- 100 -->
  {{1000 | number}} <!-- 1,000 -->
  {{1000 | number:2}} <!-- 1,000.00 -->

4.orderBy

  {{[{name:‘coolcao‘,age:23},{name:‘lily‘,age:20},{name:‘tom‘,age:22}] | orderBy:‘age‘}}

  结果:
  [{"name":"lily","age":20},{"name":"tom","age":22},{"name":"coolcao","age":23}]

  默认是升序排列,如果要倒序:
  {{[{name:‘coolcao‘,age:23},{name:‘lily‘,age:20},{name:‘tom‘,age:22}] | orderBy:‘age‘:true}}

5.uppercase,lowercase

  {{‘abc‘ | uppercase}} <!-- ABC -->
  {{‘ABC‘ | lowercase}} <!-- abc -->

6.limitTo

  limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度。

  {{ Array | limitTo : 2 }}

  {{ [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘] | limitTo:1 }}  <!-- ["a"] -->

7.json

  json过滤器可以将一个JSON或者JavaScript对象转换成字符串。

  {{ {"name":"dreamapple","language":"AngularJS"} | json}}

  结果:
  { "name": "dreamapple", "language": "AngularJS" }

时间: 2024-12-06 11:43:47

AngularJS 内置过滤器的相关文章

angularjs内置过滤器的使用学习

在angular中内置了几个常用的filter,可以简化我们的操作. 过滤器使用 '|' 符号,概念有点类似于linux中的管道. 1.filter (过滤) filter可以根据条件过滤数据,例子: {{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}} 结果: [{"name":"coolcao","age":23}]

angularjs开发常见问题-2(angularjs内置过滤器)

在angular中内置了几个经常使用的filter,能够简化我们的操作. 过滤器使用 '|' 符号,概念有点相似于linux中的管道. 1.filter (过滤) filter能够依据条件过滤数据.样例: {{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}} 结果:[{"name":"coolcao","age":23}]

AngularJS复习-----内置过滤器和内置服务

AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请求 $resource  创建一个可以restful服务器端数据源交互对象 $location  用于返回当前页面的URL地址 $window  浏览器的window元素的jquery包装 $document  浏览器的document元素的jQuery包装 $rootscope  跟作用域的访问

Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档

前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. 本文完整项目文件代码下载地址:完整示例 Django完整内置过滤器帮助文档:Django内置过滤器完整版 参考文献:Django 中文文档 1.8 内置过滤器 注意:所有带参数的过滤器,在使用时,冒号:和参数中间不能有空格. add加 功能: 把add后的参数num加给value: 数字相加会进行算

Shiro内置过滤器

Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum DefaultFilter { anon(AnonymousFilter.class), authc(FormAuthenticationFilter.class), authcBasic(BasicHttpAuthenticationFilter.class), logout(LogoutFilte

AngularJS提供的内置过滤器

1. currencycurrecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式.currecy过滤器允许我们自己设置货币符号.默认情况下会采用客户端所处区域的货币符号,但是也可以自定义货币符号.2. datedate过滤器可以将日期格式化成需要的格式.AngularJS中内置了几种日期格式,如果没有指定使用任何格式,默认会采用mediumDate格式,下面的例子中展示了这个格式.下面是内置的支持本地化的日期格式: {{ today |

AngularJS内置指令集合

ng-model 将表单控件和当前作用域的属性进行绑定 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域.这个指令一般会出现在比较小的应用中,比如给个demo什么的... 代码如下: <div ng-init="job='fighter'&quo

AngularJS内置指令

内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.但先不要管咬文嚼字,用起来倒是易懂,例如: 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.som

Node.js开发入门—使用AngularJS内置服务

在上一篇,"AngularJS简单示例"中演示了一个非常简单的使用Angular的小demo,那篇已经太长,原本要介绍的一些内容只好单另开篇了.这些内容,就是如何使用Angular服务. 我们还是基于"AngularJS简单示例"中的示例来改造一下.新的示例,能从Node.js+Express构造的服务器上获取管理菜单.为了实现这个,需要做几部分改造: 服务器提供adminMenu的下载功能,需要修改app.js,处理路由 修改Angular实现的控制器x-cont