美文网首页Web前端之路
重温AngularJS(五)-- 过滤器

重温AngularJS(五)-- 过滤器

作者: Zyao89 | 来源:发表于2017-02-18 16:56 被阅读56次

    关联目录索引:
    重温AngularJS(一)-- 表达式、指令
    重温AngularJS(二)-- 模型ng-model指令
    重温AngularJS(三)-- Scope(作用域)
    重温AngularJS(四)-- 控制器ng-controller
    重温AngularJS(五)-- 过滤器
    重温AngularJS(六)-- 服务Service
    重温AngularJS(七)-- Select(选择框)、表格
    重温AngularJS(八)-- 事件
    重温AngularJS(九)-- 模块、全局API
    重温AngularJS(十)-- 表单、输入验证
    重温AngularJS(十一)-- 包含、动画
    重温AngularJS(十二)-- 依赖注入(5个核心组件)
    重温AngularJS(十三)-- 路由

    作者:Zyao89;转载请保留此行,谢谢;


    过滤器可以使用一个管道字符 | 添加到表达式和指令中。

    通过使用管道,可以便于双向的数据绑定中视图的展现。

    过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数。

    AngularJS 过滤器

    AngularJS 过滤器可用于转换数据:

    过滤器 描述
    currency 格式化数字为货币格式。
    filter 从数组项中选择一个子集。
    lowercase 格式化字符串为小写。
    orderBy 根据某个表达式排列数组。
    uppercase 格式化字符串为大写。

    表达式中添加过滤器

    过滤器可以通过一个管道字符 | 和一个过滤器添加到表达式中。

    uppercase 过滤器将字符串格式化为大写:

    <div ng-app="myApp" ng-controller="personCtrl">
    
    <p>姓名为 {{ lastName | uppercase }}</p>
    
    </div>
    

    lowercase 过滤器将字符串格式化为小写:

    <div ng-app="myApp" ng-controller="personCtrl">
    
    <p>姓名为 {{ lastName | lowercase }}</p>
    
    </div>
    

    currency 过滤器

    currency 过滤器将数字格式化为货币格式:

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

    向指令添加过滤器

    过滤器可以通过一个管道字符 | 和一个过滤器添加到指令中。
    orderBy 过滤器根据表达式排列数组:

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

    过滤输入

    输入过滤器可以通过一个管道字符 | 和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
    filter 过滤器从数组中选择一个子集:

    <div ng-app="myApp" 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>
    

    根据input输入的内容,去过滤内容


    自定义过滤器

    待增加...

    相关文章

      网友评论

        本文标题:重温AngularJS(五)-- 过滤器

        本文链接:https://www.haomeiwen.com/subject/xdzrwttx.html