zoukankan      html  css  js  c++  java
  • AngularJS快速入门指南06:过滤器

      通过管道字符(‘|’),过滤器可以被添加到表达式和指令中。


    AngularJS过滤器

      AngularJS过滤器可以被用来转换(格式化)数据:

    过滤器描述
    currency 将数字格式化为现金格式。
    filter 从一个集合中选择子项。
    lowercase 将字符串转换为小写形式。
    orderBy 通过一个表达式对集合元素进行排序。
    uppercase 将字符串转换为大写形式。

    在表达式中添加过滤器

      过滤器可以通过管道字符(‘|’)被添加到表达式。

      接下来的两个示例我们将使用在之前的章节中使用过的person控制器。

      uppercase过滤器用来将给定的字符串转换成大写形式:

    <div ng-app="" ng-controller="personCtrl">
    
    <p>The name is {{ lastName | uppercase }}</p>
    
    </div>

    运行

      lowercase过滤器用来将给定的字符串转换成小写形式:

    <div ng-app="" ng-controller="personCtrl">
    
    <p>The name is {{ lastName | lowercase }}</p>
    
    </div>

    运行


    currency过滤器

      currency过滤器用来将数字格式化为现金格式:

    <div ng-app="" ng-controller="costCtrl">
    
    <input type="number" ng-model="quantity">
    <input type="number" ng-model="price">
    
    <p>Total = {{ (quantity * price) | currency }}</p>
    
    </div>

    运行


    将过滤器添加到指令

      过滤器也可以通过管道字符(‘|’)被添加到指令。

      orderBy过滤器通过表达式对数组进行排序:

    <div ng-app="" ng-controller="namesCtrl">
    
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
    
    <div>

    运行


    通过输入进行过滤

      通过在指令中使用管道字符(‘|’),后面紧跟filter加冒号再加上一个模型的名称,可以形成一个输入过滤器,用来根据用户输入的内容对集合进行过滤:

    <div ng-app="" ng-controller="namesCtrl">
    
    <p><input type="text" ng-model="test"></p>
    
    <ul>
      <li ng-repeat="x in names | filter:test | orderBy:'country'">
        {{ (x.name | uppercase) + ', ' + x.country }}
      </li>
    </ul>
    
    </div>

    运行

  • 相关阅读:
    北京之行
    csharp进界
    医院OA系统新思考
    茗洋博客
    monkey主要参数详解
    使用python判断Android自动化的渠道包是否全部打完
    手机连接mac电脑无法使用adb命令解决方法
    Python正则表达式指南
    Mac基本命令大全
    Mac之vim普通命令使用
  • 原文地址:https://www.cnblogs.com/jaxu/p/4489278.html
Copyright © 2011-2022 走看看