AngularJS过滤和排序的详细说明和示例代码

在知道如何使用AngularJS后，我将简单地编写一个小程序来实现查询过滤和排序的功能。

在该计划中，您可以了解：

1个角度js过滤器

如何使用2 ng重复

3控制器的使用

4数据绑定

编程分析

首先，如果要先查询和过滤，应该使用AngularJS中的过滤器。

直接在表达式后面使用pipeline命令|就可以根据下面的写法达到过滤效果：

{{ persons | filter:query }}

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

同样，使用orderBy也可以实现排序功能：

{ { persons | filter : query | order by : ORder } }

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

search : input ng-model=' query ' Sort by : select ng-model=' order '选项值='name'name/option选项值=' age ' age/option/SelectAngularJS是一种基于DOM的框架语言，因此不需要实现任何侦听器或事件触发器。当查询所在的输入框发生变化时，会触发输入框与下面表达式之间的双向刷新！

与其他框架相比，它是通过基于字符串的DOM节点innerHTML添加到DOM中的，AngularJS的实现加速了模型和视图的呈现。并且减少了很多不必要的监听器、触发器等代码编写，真正达到类似spring的效果~

数据的呈现可以通过ng-repeat来实现。当网页被解析为ng-repeat时，将为数组中的每个元素克隆一个标记，用于编译和解析。

ul class=' persons ' Li ng-repeat=' person in persons | filter 3360 query | order by : order ' { person。姓名} } { {人。age}}/Li/ul剩下的工作是用脚本初始化perons数组：

div ng-控制器='ctl './div script type=' text/JavaScript ' function CTL($ scope){ $ scope . persons=[{ ' name ' : ' xingoo '，' age':25}，{'name':'zhangsan '，' age':18}，{'name':'lisi '，' age':20 '，{ ' name ' 3: '吴王'，' age ' 3:30 }]；$ scope.order=' age}/脚本代码和结果

最后，粘贴所有代码：

！doctype html html ng-app head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http :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 '选项值='name'name/option值=' age ' age/option/select ul class=' persons ' Li ng-ng$ scope.order=' age}/脚本/正文/html使用结果：

默认情况下，使用年龄进行排序：

您可以通过选择按名称排序

当您再次输入字符时，您将通过查询自动过滤掉一些选项

以上是AngularJS过滤整理数据的整理，后续继续补充相关数据。感谢您对本网站的支持！