angular - 使用自定义搜索词过滤 RadListView
问题描述
是否可以将过滤函数传递给可以访问局部变量“searchTerm”的Angular Nativescript RadListView?我已经尝试过此处提供的示例,但是该示例建议的是静态搜索词。
我希望对样本过滤器功能做不同的事情;
样本
this.myFilteringFunc = (item: DataItem) => {
return item && item.name.includes("Special Item");
};
我正在将搜索词修改"Special Item"
为用户输入的文本框。我试过的是;
打字稿
// on inital load....
this.resultsFound = this._dataItems
&& this._dataItems.length > 0
&& this._dataItems.filter(c => (c.Firstname && c.FirstName.includes(this.searchTerm))
|| (c.LastName && c.LastName.includes(this.searchTerm))
).length > 0;
if (this.searchTerm.length > 0) {
if(this.resultsFound) listView.filteringFunction = this.filterByName.bind(this);
}
else {
listView.filteringFunction = undefined;
}
//...later, I define the filtering function like so;
filterByName(item: NameListViewModel) {
if (!this.searchTerm){
return true;
}
return item
&& ((item.FirstName && item.FirstName.includes(this.searchTerm))
|| (item.LastName && item.LastName.includes(this.searchTerm)));
};
看法
<RadListView #myListView row="0" *ngIf="resultsFound" [items]="dataItems" [groupingFunction]="groupByAge" (itemLoading)="onItemLoading($event)">
<ng-template tkListItemTemplate let-item="item" let-i="index">
<StackLayout class="person-card">
<app-person-register-list-item [item]="item"></app-person-register-list-item>
</StackLayout>
</ng-template>
<ng-template tkGroupTemplate let-category="category">
<StackLayout orientation="horizontal" [ngClass]="{'neutral-background':getCount(category)==''}" [ngClass]="{'grouping-header':getCount(category)!=''}" ios:height="50">
<Label class="person-group-header" text="{{formatCategory(category)}}"></Label>
<Label class="person-number" text="{{getCount(category)}}" verticalAlignment="center"></Label>
</StackLayout>
</ng-template>
</RadListView>
解决方案
您可以简单地使用带有items
属性绑定的过滤器管道。
<RadListView [items]="dataItems | filter:filterText" ...>
filterText
可能是您的动态输入。过滤管可能看起来像
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "filter"
})
export class FilterPipe implements PipeTransform {
transform(source: any, filterText: string): any {
if (!filterText) {
return source;
}
const result: Array<any> = new Array<any>(),
filterReg: RegExp = new RegExp(filterText, "i");
source.forEach((item) => {
if (filterReg.test(item.title)) {
result.push(item);
}
});
return result;
}
}
推荐阅读
- sql - 如何使用查询的起始值创建序列?
- ionic-framework - 如何在 ionic 3 应用程序中向离子幻灯片添加占位符图像?
- android - 在 Android 中使用 Volley 在 POST 请求中仅发送特定的 JSON 值
- node.js - 在节点 js 脚本中显示所有变量
- jquery - 如何将 data-id 值发送给函数
- wordpress - 如何使用 PayPal 和 Stripe Addon 在 wordpress 中将两个付款价格添加到联系表格 7
- node.js - 我通过节点 js 将 sqlite3 查询结果作为 json 发送到浏览器
- php - 从特定页面提交表单(Concrete5 8.3.2)
- javascript - AngularJS 1.5 应用程序提供 DOM7011:此页面上的代码禁用了 IE11 中的前后缓存
- node.js - Firebase 函数在 Function.MapValues 处返回 RangeError