• angular学习笔记(十六) -- 过滤器(1)


    本篇主要介绍过滤器的基本用法:

    过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作:

    {{expression | filter1:,参数1,2... | filter2: 参数1,参数2... }}

    expression : 表达式,也就是还没有经过过滤的变量值,相当于普通的 {{}}里面的内容

    filter1 : 过滤器的名字,可以是angular内置的过滤器,也可以自定义过滤器(在下一篇里讲解)

    参数1,参数2,... : 需要被传递给过滤器函数的参数,可以有多个

    过滤器可以通过 "|" 进行多次过滤

    下面来看一些angular内置的过滤器的基本用法:

    <!DOCTYPE html>
    <html ng-app>
    <head>
      <title>13.1过滤器</title>
      <meta charset="utf-8">
      <script src="../angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller="filter">
      <span>{{num | number:2 }}</span>
      <br>
      <span>{{num | number:0 }}</span>
      <br>
      <span>{{num | number:0 | currency }}</span>
      <br>
      <span>{{num | currency }}</span>
      <br>
      <span>{{day | date }}</span>
      <br>
      <span>{{word | uppercase}}</span>
    </div>
    </body>
    </html>
    function filter($scope){
        $scope.word  = 'code_bunny';
        $scope.day  = 1302375948026;
        $scope.num  = 12.956;
    }

    1.{{num | currency }}

       currency: 把数字过滤成美元,四舍五入格式化成小数点后两位.

    2. {{num | number:0 }}

       number: 格式化数字,后面的参数表示格式化时保留小数点后面的个数,0就是不保留小数,1就是取一位,四舍五入

    3. {{num | number:0 | currency }}

       number | currency : 先格式化数字,再格式化成美元

    4. {{word | uppercase}}

       uppercase :  将单词的小写转为大写

    这里只是举例,还有很多内置的angular过滤器.详细可以看手册

    --------------------------------------------------------------------------------------------------------

    遗留问题:

    1.currency过滤器如果不要格式化到小数点后面2位的话,不知道怎么处理,现在即使给一个没有小数的整数,比如12,它也会格式化为$12.00




  • 相关阅读:
    SpringBoot + redis + @Cacheable注解实现缓存清除缓存
    Linux常用命令
    Java8 Stream分组
    VMware CentOS网络配置(局域网其它主机可访问Linux虚拟机)
    Jenkins实现自动打包,MAVEN打包,Shell脚本启动
    Docker常用命令,Docker安装Nginx、Redis、Jenkins、tomcat、MySQL
    Postman配置Pre-request scripts预请求对请求进行AES加密
    《Java并发编程的艺术》并发编程的基础(四)
    linux shell的创建与启动
    《Java并发编程的艺术》Java内存模型(三)
  • 原文地址:https://www.cnblogs.com/liulangmao/p/3741366.html
Copyright © 2020-2023  润新知