AngularJS 过滤与排序详解及实例代码

这篇文章主要介绍了AngularJS 过滤与排序,实现查询过滤以及排序的功能。

通过这篇文章可以了解到

  1、 angularjs的过滤器

  2、 ng-repeat的使用方法

  3、 控制器的使用

  4、 数据的绑定

首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了。

  直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果:

  {{ persons | filter:query }}

  通过使用filter实现过滤操作,query是查询过滤时输入的字符串。

  类似地,使用orderBy就可以实现排序的功能:

  {{ persons | filter:query | orderBy:order }}

上面的查询以及排序涉及到两个变量,query和order。在这里直接使用ng-model实现数据的绑定即可:

搜索:<input ng-model="query">

排序:<select ng-model="order">

    <option value="name">name</option>

    <option value="age">age</option>

  </select>

数据的展现,可以通过ng-repeat实现。当网页解析到ng-repeat的时候,会为每一个数组中的元素都克隆一份标签,进行编译解析。   

     <ul class="persons">

        <li ng-repeat="person in persons | filter:query | orderBy:order">

          {{person.name}}

          {{person.age}}

        </li>

      </ul>

这些就是需要在script中进行perons数组的初始化:

  <script type="text/javascript">

    function ctl($scope){

      $scope.persons = [

        {"name":"xingoo","age":25},

        {"name":"zhangsan","age":18},

        {"name":"lisi","age":20},

        {"name":"wangwu","age":30}

      ];

      $scope.order = "age";

    }

  </script> 

实例:

<!doctype html>

<html ng-app>

  <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

  </head>

  <body>

    <div ng-controller="ctl">

      Search:<input ng-model="query">

      Sort by:<select ng-model="order">

        <option value="name">name</option>

        <option value="age">age</option>

      </select>

      <ul class="persons">

        <li ng-repeat="person in persons | filter:query | orderBy:order">

          {{person.name}}

          

          {{person.age}}

        </li>

      </ul>

    </div>

    <script type="text/javascript">

      function ctl($scope){

        $scope.persons = [

          {"name":"xingoo","age":25},

          {"name":"zhangsan","age":18},

          {"name":"lisi","age":20},

          {"name":"wangwu","age":30}

        ];

        $scope.order = "age";

      }

    </script>

  </body>

</html>

时间: 2024-10-11 03:34:05

AngularJS 过滤与排序详解及实例代码的相关文章

【甘道夫】HBase(0.96以上版本)过滤器Filter详解及实例代码

说明: 本文参考官方Ref Guide,Developer API和众多博客,并结合实测代码编写,详细总结HBase的Filter功能,并附上每类Filter的相应代码实现. 本文尽量遵从Ref Guide中"9.4. Client Request Filters"的行文顺序,便于读者对比查看,但内容比官方文档更加详实. 欢迎转载,请注明来源: http://blog.csdn.net/u010967382/article/details/37653177 目录: 引言 -- 参数基础

JavaScript 身份证号有效验证详解及实例代码

JavaScript 身份证号有效验证详解及实例代码 这篇文章主要介绍了JavaScript 身份证号有效验证详解及实例代码的相关资料,需要的朋友可以参考下 JavaScript验证身份证号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <%@ page language="jav

HBase(0.96以上版本)过滤器Filter详解及实例代码

说明: 本文参考官方Ref Guide,Developer API和众多博客,并结合实测代码编写,详细总结HBase的Filter功能,并附上每类Filter的相应代码实现. 本文尽量遵从Ref Guide中"9.4. Client Request Filters"的行文顺序,便于读者对比查看,但内容比官方文档更加详实. ***2014年7月18日更新,新增PageFilter和SkipFilter.*** 目录: 引言 -- 参数基础 1. 结构(Structural)过滤器--Fi

c#大文件上传详解及实例代码

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据.上传影音文件等.如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成. 下面从文件上传方式入手,整理大文件上传的思路,并给出了相关实例代码,由于PHP内置了比较方便的文件拆分和拼接方法,因此服务端代码使用

B/S大文件上传详解及实例代码

一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content-Range实体头.HTTP协议本身不支持断点上传,需要自己实现. 二.Range 用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式: Range:用于客户端到服务端的请求,可以通过改字段指定下载文件的某一段大小及其单位,字节偏移从0开始.典型格式: Ranges:    (unit=

局域网大文件上传详解及实例代码

javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data"> <

Rxjava2 Observable的数据过滤详解及实例(一)

目录 简要: 1. Debounce 1.1 debounce(timeout, unit) 1.2 debounce(debounceSelector) 2. Throttle 2.1 throttleFirst(windowDuration, unit) 2.2 throttleLast(intervalDuration, unit) 2.3 throttleWithTimeout(timeout, unit) 3. Sample 3.1 sample(period, unit) 3.2 s

Rxjava2 Observable的数据过滤详解及实例(二)

目录 6. Filter 7. Frist 7.1 firstElement() 7.2 first(defaultItem) 7.3 firstOrError() 8. Single 8.1 singleElement() 8.2 single(defaultItem) 8.3 singleOrError() 9. ElementAt 9.1 elementAt(index) 9.2 elementAt(index, defaultItem) 9.3 elementAtOrError(inde

红帽Linux故障定位技术详解与实例(2)

红帽Linux故障定位技术详解与实例(2) 2011-09-28 14:26 圈儿 BEAREYES.COM 我要评论(0) 字号:T | T 在线故障定位就是在故障发生时, 故障所处的操作系统环境仍然可以访问,故障处理人员可通过console, ssh等方式登录到操作系统上,在shell上执行各种操作命令或测试程序的方式对故障环境进行观察,分析,测试,以定位出故障发生的原因. AD:2014WOT全球软件技术峰会北京站 课程视频发布 3.内核故障情形及处理 (1)内核panic panic是内