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


Posted in Javascript onSeptember 14, 2016

前面了解了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实现数据的绑定即可:

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进行排序:

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

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

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

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

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

以上就是对AngularJS 过滤与排序的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 #Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 #Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 #Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 #Javascript
AngularJS equal比较对象实例详解
Sep 14 #Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 #Javascript
AngularJS $injector 依赖注入详解
Sep 14 #Javascript
You might like
实用函数5
2007/11/08 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jQuery的观察者模式详解
2014/12/22 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python通过索引遍历列表的方法
2015/05/04 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
详解Python中dict与set的使用
2015/08/10 Python
解决python "No module named pip" 的问题
2018/10/13 Python
pygame实现打字游戏
2021/02/19 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
四风存在的原因分析
2014/02/11 职场文书
建议书怎么写
2014/03/12 职场文书
2014组织生活会方案
2014/05/19 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
学术会议通知
2015/04/15 职场文书
《社戏》教学反思
2016/02/22 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技