[英]custom filter search in angular 5
data : [
{
id :1,
name : "client A",
industry: "Industry 1",
img:"https://abc"
},
{
id :2,
name : "client Ab",
industry: "Industry 2",
img:"https://abc"
},
{
id :3,
name : "client megha",
industry: "Industry 5",
img:"https://abc"
},
{
id :4,
name : "shubham",
industry: "Industry 1",
img:"https://abc"
},
{
id :4,
name : "rick",
industry: "Industry 1",
img:"https://abc"
}
]
I want the filter to do the follwing: 我希望过滤器执行以下操作:
When i start writing the word "c", i want the rick to disappear, right now the default behavior is, all are still shown (the c is in the middle of rick). 当我开始写单词“ c”时,我希望rick消失,现在默认行为是,所有内容仍然显示(c在rick的中间)。
strict mode is something that i dont want to use, the behavior i want is: 严格模式是我不想使用的东西,我想要的行为是:
if there is no value in the input, i want to see all, if i start to write i want to see the exact one by firstName. 如果输入中没有任何值,那么我想查看全部内容,如果我开始写,则希望通过firstName查看确切的值。 if i write "m" nothing should be displayed as none of the names start with m.
如果我写“ m”,则不应显示任何内容,因为名称均不以m开头。 i want the search on the basis of names and industry but not on the basis of img.
我想根据名称和行业进行搜索,但不希望基于img进行搜索。 please help.
请帮忙。
As you are using Typescript and angular 5 , so you can use the ES6 method available with strings called startsWith
which returns true only if the value is present at the starting index. 当您使用Typescript和angular 5时,因此可以使用ES6方法,该方法可用于名为
startsWith
字符串,该字符串仅在起始索引处存在该值时才返回true。
You can create a custom pipe in angular with startsWith
method to filter out the data based on what you type in the textbox. 您可以使用
startsWith
方法创建一个带有角度的自定义管道,以根据您在文本框中键入的内容过滤掉数据。 For example if you r
then it will only return rick
. 例如,如果您
r
则它将仅返回rick
。 For this example I am following a case insensitive search. 对于此示例,我遵循不区分大小写的搜索。 Check the code below
检查下面的代码
custom pipe startWith 自定义管道startWith
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'startsWith'})
export class startsWithPipe implements PipeTransform {
transform(value: any[], term: string): any[] {
return value.filter((x:any) => x.name.toLowerCase().startsWith(term.toLowerCase()))
}
}
usage in the app.component with ngModel ngModel在app.component中的用法
app.component.ts app.component.ts
import { Component } from '@angular/core';
import {startsWithPipe} from './customstart.pipes';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 5';
query:string = '';
data = [
{
id :1,
name : "client A",
industry: "Industry 1"
},
{
id :2,
name : "client Ab",
industry: "Industry 2"
},
{
id :3,
name : "client megha",
industry: "Industry 5"
},
{
id :4,
name : "shubham",
industry: "Industry 1"
},
{
id :4,
name : "rick",
industry: "Industry 1"
}
]
}
app.component.html app.component.html
<input type="text" [(ngModel)]="query">
<ul>
<li *ngFor="let item of data | startsWith : query">{{item.name}}</li>
</ul>
Here is a working demo : https://stackblitz.com/edit/angular-custom-pipes-mkah47 这是一个工作示例: https : //stackblitz.com/edit/angular-custom-pipes-mkah47
Edit : To show the results if either the starting character of the firstname or industry matches the typed character then you need to change your pipe like below 编辑:要显示结果,如果名字的开头字符或行业的开头字符与键入的字符匹配,则需要如下所示更改管道
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'startsWith'})
export class startsWithPipe implements PipeTransform {
transform(value: any[], term: string): any[] {
return value.filter((x:any) => x.name.toLowerCase().startsWith(term.toLowerCase()) || x.industry.toLowerCase().startsWith(term.toLowerCase()))
}
}
Here is the sample data to test 这是要测试的样本数据
data = [
{
id :1,
name : "client A",
industry: "Tech"
},
{
id :2,
name : "client Ab",
industry: "Tourism"
},
{
id :3,
name : "client megha",
industry: "Hotel"
},
{
id :4,
name : "shubham",
industry: "Retail"
},
{
id :4,
name : "rick",
industry: "IT"
}
]
I have updated the example here : https://stackblitz.com/edit/angular-custom-pipes-mkah47 我在这里更新了示例: https : //stackblitz.com/edit/angular-custom-pipes-mkah47
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.