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

2024-10-01 22:10:16

前面了解了AngularJS的使用方法，这里就简单的写个小程序，实现查询过滤以及排序的功能。

本程序中可以了解到：

　　1 angularjs的过滤器

　　2 ng-repeat的使用方法

　　3 控制器的使用

　　4 数据的绑定

　　程序设计分析

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

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

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

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

　　上面的查询以及排序涉及到两个变量，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排序

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

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

妙用Angularjs实现表格按指定列排序

使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: <table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';d
Angularjs添加排序查询功能的实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script&g
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致代码: <!DOCTYPE html> <html lang
AngularJS ng-table插件设置排序

基础概念 ng-table提供了一个表头来提供,基础的过滤信息: (1)指定一列的过滤器,然后模板就会使用. (2)ngTable支持number, text, select 和 select-multiple的值模板. (3)可以有选择的为NgTableParams提供初始过滤值. <div class="row"> <div class="col-md-6" ng-controller="demoController as demo&
Angularjs使用过滤器完成排序功能

本文实例为大家分享了Angularjs过滤器完成排序的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angularjs.js" ></script>
AngularJS轻松实现双击排序的功能

话不多说,直接看示例代码 HTML代码 <th class="col-md-3"><a href="" ng-click="desc('2',la=!la)">单价</a></th> <th class="col-md-3"><a href="" ng-click="desc('3',la=!la)">销售金额<
AngularJS 过滤与排序详解及实例代码

前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定程序设计分析首先,如果要是先查询过滤,就要使用到AngularJS中的过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query
php array_multisort 对数组进行排序详解及实例代码

php 中array_multisort() 函数可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序.本文章向大家讲解array_multisort函数的使用方法. array_multisort() 函数返回排序数组.您可以输入一个或多个数组.函数先对第一个数组进行排序,接着是其他数组,如果两个或多个值相同,它将对下一个数组进行排序. 注释:字符串键名将被保留,但是数字键名将被重新索引,从 0 开始,并以 1 递增. 注释:您可以在每个数组后设置排序顺序和排序类型参数.如果
AngularJS 指令的交互详解及实例代码

背景介绍这例子是视频中的例子,有一个动感超人,有三种能力,力量strength,速度speed,发光light. 这三种能力作为三种属性,定义动感超人作为一个标签,只要添加对应的属性就能拥有该能力. 为了便于结果的展示,为标签添加鼠标的响应事件,当鼠标移动到对应的标签上就会触发一个方法,打印出具备的能力. 程序分析 html部分的代码如下: <div> <superman>nothing!</superman> <superman strength >st
MyBatis获取数据库自生成的主键Id详解及实例代码

MyBatis获取数据库自生成的主键Id详解及实例代码在使用MySQL数据库时我们一般使用数据库的自增主键自动产生主键.如果在插入主表时,我们需要同时插入从表的数据,这时我们通常需要知道主表插入时自动产生的主键Id值. 下面介绍使用MyBatis进行插入时,如何同时获取数据库自生成的主键: 1.XML配置文件 <insert id="insert" parameterType="Person" useGeneratedKeys="true"
MySQL 序列 AUTO_INCREMENT详解及实例代码

MySQL 序列 AUTO_INCREMENT详解及实例代码 MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍如何使用MySQL的序列. 使用AUTO_INCREMENT MySQL中最简单使用序列的方法就是使用 MySQL AUTO_INCREMENT 来定义列. 实例以下实例中创建了数据表insect, insect中id无需指定值可实现自动增长. mysql>
Java 两种延时thread和timer详解及实例代码

Java 两种延时thread和timer详解及实例代码在Java中有时候需要使程序暂停一点时间,称为延时.普通延时用Thread.sleep(int)方法,这很简单.它将当前线程挂起指定的毫秒数.如 try { Thread.currentThread().sleep(1000);//毫秒 } catch(Exception e){} 在这里需要解释一下线程沉睡的时间.sleep()方法并不能够让程序"严格"的沉睡指定的时间.例如当使用5000作为sleep()方法的参数时,线程
Spring组件自动扫描详解及实例代码

Spring组件自动扫描详解及实例代码问题描述一个系统往往有成千上万的组件,如果需要手动将所有组件都纳入spring容器中管理,是一个浩大的工程. 解决方案 Spring 提供组件扫描(component scanning)功能.它能从classpath里自动扫描.侦测和实例化具有特定注解的组件.基本的注解是@Component,它标识一个受Spring管理的组件.其他特定的注解有@Repository.@Service和@Controller,它们分别标识了持久层.服务处和表现层的组件.
Java中自定义异常详解及实例代码

Java中自定义异常详解及实例代码下面做了归纳总结,欢迎批评指正自定义异常 class ChushulingException extends Exception { public ChushulingException(String msg) { super(msg); } } class ChushufuException extends Exception { public ChushufuException(String msg) { super(msg); } } 自定义异常 En
Spring AOP 基于注解详解及实例代码

Spring AOP 基于注解详解及实例代码 1.启用spring对@AspectJ注解的支持: <beans xmlns:aop="http://www.springframework.org/schema/aop"...>  <aop:aspectj-autoproxy /> </beans> 也可以配置AnnotationAwareAspectJAutoProxyCreator Bean来启动Spring对@
java多线程编程技术详解和实例代码

java多线程编程技术详解和实例代码 1. Java和他的API都可以使用并发. 可以指定程序包含不同的执行线程,每个线程都具有自己的方法调用堆栈和程序计数器,使得线程在与其他线程并发地执行能够共享程序范围内的资源,比如共享内存,这种能力被称为多线程编程(multithreading),在核心的C和C++语言中并不具备这种能力,尽管他们影响了JAVA的设计. 2. 线程的生命周期新线程的生命周期从"新生"状态开始.程序启动线程前,线程一直是"新生"状态:

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

相关推荐

随机推荐