AngularJS过滤排序思路
本篇主要整理使用AngularJS进行过滤排序的思路。
在controller中,$scope的persons字段存储数组。
$scope.persons = [
{
"name": "aa",
"email": "aaemail",
"birthdate": "2015-03-23T18:00:37-07:00",
"phonenumber": "aaphonenumber",
"address": "aaaddress",
"city": "aacity",
"country": "China"
},
...
];
过滤
用2个文本框,一个输入和name有关,一个输入和email有关,如何实现过滤?
过滤内置函数filter接受对象。
→ 在controller中定义个对象
$scope.search = {};
→ filter条件为search对象
ng-repeat="person in persons | filter: search"
→ 搜索文本框和search.name或search.email绑定
<input type="text" ng-model="search.name" type="text" />
<input type="text" ng-model="search.email" type="text" />
用1个文本框,对任意属性搜索,如何实现?
过滤内置函数filter接受对象。
→ 在controller中定义个对象
$scope.search = {};
→ filter条件为search对象
ng-repeat="person in persons | filter: search"
→ 搜索文本框和search.$绑定
ng-model="search.$"
search.$表示可以是集合对象的任意属性,只要输入的符合集合对象任意一个属性值,filter就返回true。
用1个文本框,定义搜索的属性,比如可以搜索name, 也可以搜索name加email等等,如何实现?
过滤内置函数filter接受返回bool类型的函数。
→ filter接受函数
ng-repeat="person in persons | filter: sensitiveSearch"
注意,这里sensitiveSearch函数接收person实参。
→ 在controller中定义sensitiveSearch方法
$scope.search="";
$scope.sensitiveSearch = function(person){
if($scope.search){
return person.name.indexOf($scope.search) == 0 ||
person.email.indexOf($scope.search) == 0;
}
return true;
};
→ 搜索框绑定search属性
<input type="text" ng-model="search" />
排序
隐式排序,没有界面交互
内置排序函数orderBy接受某个属性。
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:'email'"
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:'-email'"
email表示升序排列,-emial相反。
显式排序,有界面交互,在界面上选择排序字段以及升序和降序,通过select选择排序字段
→ controller的$scope中
$scope.order = "email";
→ orderBy使用order字段
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order"
→ 界面select与order字段绑定
<select class="form-control" ng-model="order">
<option value="name">Name(asc)</option>
<option value="-name">Name(desc</option>
<option value="email">Email(asc)</option>
<option value="-email">Email(desc</option>
</select>
显式排序,有界面交互,在界面字段旁加按钮,选择升序或降序
→ controller的$scope中
$scope.order = "email";
→ orderBy使用order字段
ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order"
→ 界面
在name字段旁加升序降序按钮:
ng-click="order = 'name'"
ng-click="order = '-name'"
在email字段旁加升序降序按钮:
ng-click="order = 'email'"
ng-click="order = '-email'"
点击行事件
让当前行变换背景色,并把当前行的详细信息在某处显示出来。
→ 给当前行添加点击事件
<tr ng-repeat="person in persons | filter: sensitiveSearch | orderBy:order"
ng-style="{'background-color': person.email == selectedPerson.email ? 'lightgray':''}"
ng-click="selectPerson(person)">
ng-style接受一个对象,设置样式。
→ 在controller中定义selectPerson
$scope.selectedPerson = null;
$scope.selectPerson = function (person) {
$scope.selectedPerson = person;
};
→ 在界面的某处显示该行的详细信息
{{selectedPerson.name
{{selectedPerson.email}}
{{selectedPerson.birthdate | date: "longDate"}}
{{selectedPerson.address}}
{{selectedPerson.city}}
{{selectedPerson.country}}
搜索不到结果的处理方式
当搜索框内输入一个值,有可能是没有匹配结果。如何在没有搜索结果的时候,界面给到一个提示?
→ 把过滤排序后的结果赋值一个变量
ng-repeat="person in filteredPersons = (persons | filter: sensitiveSearch | orderBy:order)"
→ 界面某处
<tr ng-show="filteredPersons.length == 0">
<td colspan="4">
<div class="alert alert-info">
<p class="text-center">
No results found for search term '{{search}}'
</p>
</div>
</td>
</tr>
当filteredPersons所代表的搜索结果为空时,显示该区域信息。
以上只是局限在客户端的过滤和排序,如果和服务端结合起来,又另当别论了。
AngularJS过滤排序思路的更多相关文章
- ch7-列表渲染(v-for key 数组更新检测 显示过滤/排序结果)
1 说明 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- DRF 过滤排序分页异常处理
DRF 中如何使用过滤,排序,分页,以及报错了如何处理?10分钟get了~
- AngularJS如何使用ngRepeat过滤排序
NG重复指令,带过滤器,像这样: <li ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitT ...
- angularjs 字段排序 多字段排序
我们用angularjs {{}},ng-model循环绑定数组或对象的内容的时候,有时候会用到排序,有时候可能会有多个字段排序 具体要用到过滤 数据的展现,可以通过ng-repeat实现.当网页解析 ...
- 三 drf 认证,权限,限流,过滤,排序,分页,异常处理,接口文档,集xadmin的使用
因为接下来的功能中需要使用到登陆功能,所以我们使用django内置admin站点并创建一个管理员. python manage.py createsuperuser 创建管理员以后,访问admin站点 ...
- drf07 过滤 排序 分页 异常处理 自动生成接口文档
4. 过滤Filtering 对于列表数据可能需要根据字段进行过滤,我们可以通过添加django-fitlter扩展来增强支持. pip install django-filter 在配置文件sett ...
- day74:drf:drf其他功能:认证/权限/限流/过滤/排序/分页/异常处理&自动生成接口文档
目录 1.django-admin 2.认证:Authentication 3.权限:Permissions 4.限流:Throttling 5.过滤:Filtering 6.排序:OrderingF ...
- DRF之过滤排序分页异常处理
一.过滤 对于列表数据要通过字段来进行过滤,就需要添加 django-filter 模块 使用方法: # 1.注册,在app中注册 settings.py INSTALLED_APPS = [ 'dj ...
随机推荐
- php的递归函数示例
递归函数太难理解了,写了一个示例放在这里方便没事的时候看一下. <?php /** *php递归函数示例 *(从1到100的累加和计算) * */ function summation($num ...
- Python学习系列之(二)图解Windows8.1下安装Django
一. 下载 去官网下载https://www.djangoproject.com/download/最新版,最新版本是1.6 二. 安装: 将下载下来的Django-1.6.tar.gz解压到D盘,接 ...
- node.js模块、包
创建模块 Node.js 提供了 exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对 ...
- GPU下train 模型出现nan
When training on GPU, the error "Model diverged with loss = NaN" is often caused by a sotm ...
- java 异常 throw
throw UnsupportedOperationException(); //没有支持的操作NoSuchElementException(); //没有这样的元素
- 算法笔记(C++)
一.基础篇 C++标准模板库(STL) 1.vector 可以理解为“变长数组” #include <vector> vector<typename> name; vector ...
- .NetCore下使用Prometheus实现系统监控和警报 (四)客户端代码处理
在代码中使用就比较简单了 Nuget包获取下 prometheus-net prometheus-net.AspNetCore 然后添加中间件就行了 app.UseMetricServer(); 默认 ...
- 入门NodeJS
入门NodeJS https://www.cnblogs.com/dotnetcrazy/p/10118756.html NodeJS 1.环境配置 之前讲ES6的时候有提过一部分Node的知识,简单 ...
- JS易错知识点
JAVASCRIPT易错知识点整理 前言 本文是学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由 ...
- 【LOJ】#2122. 「HEOI2015」小 Z 的房间
题解 又是一道取模不给质数的毒瘤矩阵树题 不会写分数类--然后发现了网上过于神仙的题解类似与辗转相除的这样把某一个位置消成0 orz 代码 #include <bits/stdc++.h> ...