文档章节

AngularJS的过滤与排序

孟飞阳
 孟飞阳
发布于 2016/12/11 08:44
字数 599
阅读 9
收藏 0

程序设计分析

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

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

{{ persons | filter:query }}

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

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

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

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

Search:<input ng-model="query">
            Sort by:<select ng-model="order">
                <option value="name">name</option>
                <option value="age">age</option>
            </select>

 

  AngularJS是一门基于DOM的框架语言,因此不需要实现任何的监听器以及事件触发器,当query所在的输入框发生任何改变时,就会触发输入框与下面的表达式展现的双向刷新!

  相比于其他的一些框架,是基于字符串通过DOM节点innerHTML添加到DOM中,AngularJS的实现方式加快了模型与视图的展现。并且减少了大量不必要的监听器啊触发器啊之类的代码的编写,真正实现了类似spring的效果~

 

  数据的展现,可以通过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数组的初始化:

<div ng-controller="ctl">
                    ...
        </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>

  代码以及结果

  最后贴上全部的代码:

<!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>

  使用结果:

  在默认情况下,使用age进行排序:

  通过选择则可以使用name排序

  再输入字符的时候,会自动过查询过滤掉一些选项

 

本文转载自:http://www.cnblogs.com/xing901022/p/4284884.html

共有 人打赏支持
孟飞阳
粉丝 204
博文 954
码字总数 540957
作品 5
朝阳
个人站长
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
05/08
0
0
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
05/05
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day60-20180818-流利阅读笔记-待学习

钉钉:工作的归工作,生活的…也归工作? 毛西 2018-08-18 1.今日导读 你用过“钉钉”么?被公司要求使用钉钉的感受是如何的呢?这款阿里巴巴旗下的移动办公社交平台在弯道超车微信、为许多企...

aibinxiao
43分钟前
6
0
Kubernetes的HTTPS和证书问题,汇总

通过Kubernetes建立服务网站,需要干的事情和HTTPS和证书问题,汇总如下: 建立Nginx服务器 搞服务器第一步,Ubuntu 18.04设置静态IP 安装Nginx服务。 Kubernetes的deployment使用 创建服务,...

openthings
58分钟前
2
0
php 使用redis锁限制并发访问类

1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功。 例如换领优惠券,如果用户同一时间并发提交换领...

豆花饭烧土豆
今天
0
0
Linux环境搭建 | 手把手教你配置Linux虚拟机

在上一节 「手把你教你安装Linux虚拟机」 里,我们已经安装好了Linux虚拟机,在这一节里,我们将配置安装好的Linux虚拟机,使其达到可以开发的程度。 Ubuntu刚安装完毕之后,还无法进行开发,...

良许Linux
今天
0
0
(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部