angular过滤 排序问题

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

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

  {{ persons | filter:query }}

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

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

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

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

数据的展现,可以通过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> 

实例:

时间: 2024-10-28 05:10:37

angular过滤 排序问题的相关文章

angular 过滤加排序

程序设计分析 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query是查询过滤时输入的字符串. 类似地,使用orderBy就可以实现排序的功能: {{ persons | filter:query | orderBy:order }} 上面的查询以及排序涉及到两个变量,query和o

Angular系列----AngularJS入门教程04:迭代器过滤(转载)

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

angular&#160;如何获取使用filter过滤后的ng-repeat的数据长度

在做项目的过程中,被产品要求在内容为空的过程中显示提示信息,然哦户内容使用ng-repeat循环输出的,并且使用了filter过滤.后在谷歌上找到解决方案,如下: ?之前代码如下显示: <ul> <li ng-repeat="tagChoose in evaluateObj.tagChooseList|filter:{type:1}"> <label> <input type="checkbox" name="de

数组过滤后的重新排序问题

今天遇到了一个问题,分析解决后觉得可以记下来提醒自己: 很多时候从数据库中直接取出来的是数组,例如 0=>a,1=>b,2=>c,3=>d这种,然后把数组json_encode返回给前台js,并不会有什么问题. 但当进行数组过滤时,例如把上面的数组中的第二个元素用unset去掉,变成 0=>a,2=>c,3=>d,这个时候把数组json_encode返回给js,js解析后就得不到我们想要的数组,循环就会出错. 因为键值不连续的原因吧,有时间贴一下图,返回的分别大约

angular用$sce服务来过滤HTML标签

angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题.它可以通过使用$sce.trustAsHtml().该方法将值转换为特权所接受并能安全地使用"ng-bind-html". 1 .controller('HealthEducatio

RxJS之过滤操作符 ( Angular环境 )

一 take操作符 只发出源 Observable 最初发出的的N个值 (N = count). 如果源发出值的数量小于 count 的话,那么它的所有值都将发出.然后它便完成,无论源 Observable 是否完成. import { Component, OnInit } from '@angular/core'; import { range } from 'rxjs/observable/range'; import { take } from 'rxjs/operators/take'

Angular复习笔记(一)

指令:ng-app 标记在dom上,就作用于该dom结构 =========================================== 定义初始值  指令:ng-init <div ng-app="" ng-init="quantity=1;price=5"> {{quantity}}{{price}} </div>  ——>   15 =========================================== 数

angular.element()的方法大汇总

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中每个元素的子元素,包括文字和

angularjs定义对集合进行过滤的过滤器

定义对集合进行过滤的过滤器 1)定义 var md = angular.module(moduleName, ['ng.service']); md.filter('propertyLikeValueFilter2', function () { return function (list, property, value) { return _.filter(list, function (item) { return item[property]===value; }); }; }); 2)