过滤器(下)

简介

        上一节讲了5种过滤器,这一节我们把剩下的三种过滤器讲完,分别是orderBy,limitTo,filter。

过滤器

        orderBy:通过表达式对指定的数组进行排序。

        limitTo:根据传入参数生成一个新的数组或字符串,可接受负值。

        filter:根据传入的参数给定数组中选择一个子集,并生成一个新的数组 。               

例子

首先我们有个数组:items = [{name:"苹果",price:7999},{name:"三星",price:6568},{name:"黑莓",price:4000}]

<ul>

    <li ng-repeat="item in items">{{item.name}}--{{item.price}}</li>

</ul>

没有过滤器输出

1.orderBy:通过表达式对指定的数组进行排序

    <ul>

        <li ng-repeat="item in items | orderBy:'price'">{{item.name}}--{{item.price}}</li>

    </ul>

orderBy过滤器输出

跟正常输出对比orderBy按照价格生序输出,由此可见默认是生序(false)

<ul>

    <li ng-repeat="item in items | orderBy:'price':true">{{item.name}}--{{item.price}}</li>

</ul>

如果为true,那么会根据价格将序排列

2.limitTo:根据传入参数生成一个新的数组或字符串,可接受负值

<ul>

    <li ng-repeat="item in items | limitTo:2">{{item.name}}--{{item.price}}</li>

</ul>

limitTo过滤器输出

只输出了前两项,说明limitTo控制了返回对象个数,如果是-2,那么会返回倒数两个

3.filter:根据传入的参数给定数组中选择一个子集,并生成一个新的数组

<ul>

    <li ng-repeat="item in items | filter:'苹'"></li>

</ul>

filter过滤器输出

filter会根据字段检索出所有符合条件的内容。


                                                        不积跬步无以至千里,不积小流无以成江海

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载文章 angularjs 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回...
    飞将军阅读 628评论 0 2
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,668评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,200评论 19 139
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 4,886评论 0 1
  • 各位亲爱的书友好:《长恨歌》共读时间:6月1日-6月15日今天我们的共读目标是王安忆《长恨歌》的第二部第二章。 今...
    江离菲菲阅读 1,842评论 0 2