文档章节

AngularJS的过滤与排序

孟飞阳
 孟飞阳
发布于 2016/12/11 08:44
字数 599
阅读 9
收藏 0
点赞 0
评论 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

共有 人打赏支持
孟飞阳
粉丝 202
博文 895
码字总数 531335
作品 5
朝阳
个人站长
Angular 6.0正式版发布,都有哪些新功能

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

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

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

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长 ⋅ 06/21 ⋅ 0

Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

没有更多内容

加载失败,请刷新页面

加载更多

下一页

对于程序员的招聘问题,作为软件人的一些吐槽和建议

作为软件人,找工作有时候似乎挺苦逼的。 说真的,让我去掉前面这句中“似乎”二字吧。就是苦逼!很多人都曾抱怨处在招聘的一方很糟糕——我们没有任何可靠的方式来甄别会写代码并且写得好的...

老道士 ⋅ 8分钟前 ⋅ 0

HDFS原理学习

一、概述 1、 Hadoop整合了众多的文件系统,首先提供了一个高层的文件系统抽象org.apache.hadoop.fs.FileSystem。然后有各个文件系统的实现类。 2、Hadoop是JAVA编写的,不同文件系统之间的交...

cjxcloud ⋅ 12分钟前 ⋅ 0

Linux下MySQL表名不区分大小写的设置方法(抄袭别人的)

Linux下MySQL表名不区分大小写的设置方法 MySQL表名不区分大小写的设置方法 在用centox安装mysql后,把项目的数据库移植了过去,发现一些表的数据查不到,排查了一下问题,最后发现是表名的大...

随风而浮沉 ⋅ 17分钟前 ⋅ 0

ubuntu下安装宋体simsun

sudo cp simsun.ttc /usr/share/fonts cd /usr/share/fonts sudo chmod 644 simsun.ttc 更新字体缓存: 代码: sudo mkfontscale 代码: sudo mkfontdir 代码: sudo fc-cache -fsv 安装chrome扩......

wangxuwei ⋅ 18分钟前 ⋅ 0

利用 ssh 传输文件

Linux 下一般可以用 scp 命令通过 ssh 传送文件: #把服务器上的 /home/user/a.txt 发送到本机的 /var/www/local_dir 目录下scp username@servername:/home/user/a.txt /var/www/local_dir...

大灰狼时间 ⋅ 28分钟前 ⋅ 0

web3j教程:android和java程序员如何使用web3j开发区块链以太坊

如何使用web3j为Java应用或Android App增加以太坊区块链支持,本教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建、钱包创建、交易转账,交易与状态、智能合约开发与交互、过滤...

智能合约 ⋅ 50分钟前 ⋅ 0

web3j开发java或android以太坊智能合约快速入门

web3j简介 web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 可以通过它进行以太坊区块链...

笔阁 ⋅ 53分钟前 ⋅ 0

一起读书《深入浅出nodejs》-异步I/O

异步I/O “异步”这个名词其实很早就诞生了,但它大规模流行却是在Web 2.0浪潮中,它伴随着AJAX的第一个A(Asynchronous)席卷了Web。 为什么要异步I/O 关于异步I/O为何在Node里如此重要,这与...

小草先森 ⋅ 55分钟前 ⋅ 0

JVM各种问题

1、如果启动什么都不设,会怎样? 先来看一个命令 [root@localhost bin]# java -XX:+PrintCommandLineFlags -version -XX:InitialHeapSize=29899008 -XX:MaxHeapSize=478384128 -XX:+PrintCo......

算法之名 ⋅ 今天 ⋅ 0

SAS笔记-宏2

宏是一种文本,一般来说其编译是在程序执行之前。 宏变量的创建 %let语句 %let macro_variables = text; %let是常见的宏变量建立方式,其编译就在执行前。如下例中,想要宏变量test等于数据集...

tonorth123 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部