Angular2—搜索功能(管道)
2017-10-24 17:55
344 查看
Angular2入坑指南——管道(搜索功能)
想必大家做项目都会遇到搜索功能吧,通常都是搜索本地数据,如果通过http去请求后台再回显的话,那响应速度简直叫人抓狂,所以大多数都是先存到本地然后进行搜索回显。Angular1的方法很简单,只需要在input标签加入ng-model,然后再在想要显示数据的标签加上| filter就好了,然而,Angular2移除了filter和orderBy,他们的理由是:感觉filter和orderBy响应很慢。我想问:什么是快?怎么快?达到多少KB/s算快?这就要求我们自己写方法来实现了,但是文档提供的仅仅只有那么几个管道,根本没有我们想用的,于是我就自己写了一个搜索关键字的小demo,在这里和大家分享下,不足之处还请多提意见给我哦。
首先创建一个名为*.pipe.ts的文件,然后在其中引入Pipe、PipeTransform和Injectable:
然后在module中注册它,使它生效:
生效后就可以在module下的所有模块中使用了,直接填写管道名称就可以啦,比如下面的例子:
之后,只要在搜索框里输入内容时就会动态显示搜索内容啦
参考http://www.cnblogs.com/Speykey521/p/7136953.html
想必大家做项目都会遇到搜索功能吧,通常都是搜索本地数据,如果通过http去请求后台再回显的话,那响应速度简直叫人抓狂,所以大多数都是先存到本地然后进行搜索回显。Angular1的方法很简单,只需要在input标签加入ng-model,然后再在想要显示数据的标签加上| filter就好了,然而,Angular2移除了filter和orderBy,他们的理由是:感觉filter和orderBy响应很慢。我想问:什么是快?怎么快?达到多少KB/s算快?这就要求我们自己写方法来实现了,但是文档提供的仅仅只有那么几个管道,根本没有我们想用的,于是我就自己写了一个搜索关键字的小demo,在这里和大家分享下,不足之处还请多提意见给我哦。
首先创建一个名为*.pipe.ts的文件,然后在其中引入Pipe、PipeTransform和Injectable:
import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'searchInfos', pure: true }) @Injectable() export class SearchFilter implement PipeTransform{ transform ( items:Array<实体类>,args: any ): any[ ] { var searchCtrl = ( data: any ) => { var all = false; if ( typeof data === 'object' ) { for ( var z in data ) { if ( all = searchCtrl( data[z] ) ) { break; }; }; } else { if ( typeof data === 'number' ) { all = data === args; } else { all = data.toString().match( new RegExp( args, 'i' ) ); } } return all; } return items.filter(searchCtrl); } };
然后在module中注册它,使它生效:
declarations: [ SearchFilter ], exports: [ SearchFilter ]
生效后就可以在module下的所有模块中使用了,直接填写管道名称就可以啦,比如下面的例子:
<input type="text" [(ngModel)]="search" /> <p *ngFor="let data of datas | searchInfos: search"></p>
之后,只要在搜索框里输入内容时就会动态显示搜索内容啦
参考http://www.cnblogs.com/Speykey521/p/7136953.html
相关文章推荐
- angular使用管道实现搜索功能
- Angularjs material 实现搜索框功能
- Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
- angular做的一个表单带删除排序,搜索等功能
- Angularjs material 实现搜索框功能
- 用angular方法简单实现了吃了么搜索小功能,还不太完善,后续会继续添加新内容。
- angular利用$location实现搜索功能。
- HTML+AngularJS+Groovy如何实现登录功能
- Angular 2的管道Pipe
- 利用UITextField自定义搜索栏,实现中文输入过程中字母的搜索功能
- 搜索引擎之全文搜索算法功能实现(基于Lucene)
- ThinkPHP实现ajax仿官网搜索功能实例
- 利用chosen.js插件实现下拉可搜索多选,控制选择个数,选项框复位,修改下拉选项的功能(附代码)
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- [置顶] ExtJs4.2应用:使用ExtJs扩展组件searchfield实现数据搜索功能
- ajax实现搜索提示功能 (关键字自动匹配功能)
- csdn的简历怎么投递啊?怎么没有搜索功能?
- 芯片功能积累 74HC4075 三个 三输入 或门 在Multisim中 搜索4075
- js实现input输入文字搜索功能
- Ajax实现智能提示搜索功能