zoukankan      html  css  js  c++  java
  • 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" }


  • 相关阅读:
    SQL 判断字符包含在记录中出现了多少次
    JS 数据类型判断
    JS object转日期
    JS 日期转字符串
    Linux系统优化03-centos7网卡配置
    Linux系统安装02-centos7系统安装-分区及基本设置
    Linux系统安装01-centos7系统安装
    解决winserver2012R2安装VMware15(pro)问题
    Tomcat 如何设置Tomcat的标题,运行Tomcat显示为自己程序的命名
    IntelliJ Idea 常用快捷键列表
  • 原文地址:https://www.cnblogs.com/jeesezhang/p/5164204.html
Copyright © 2011-2022 走看看