在离子/角度离子卡上创建DOM过滤器
在离子/角度离子卡上创建DOM过滤器
提问于 2021-03-11 23:20:50
Ionic项目有一个离子卡，它工作正常，问题是列表在增长，我需要设置一个字段来过滤搜索，在ionic中有什么本地方法可以做到这一点吗？或者我不得不使用JQuery作为例子。
有谁有例子吗？
卡片是动态创建的
<ion-card *ngFor="let data of dataArray" id="{{ data._id }}">
<ion-card-content class="p-0">
<ion-card-header>
<ion-card-title>
{{ data.title }}
</ion-card-title>
<ion-card-subtitle *ngIf="data.protocol" id="{{data.protocol}}">
{{ data.protocol }}
<ion-icon name="copy-outline" (click)="copyProtocol(data.protocol)" class="ml-2"></ion-icon>
</ion-card-subtitle>
<ion-card-subtitle>
{{ data.description }}
</ion-card-subtitle>
</ion-card-header>
<ion-item lines="none" class="ion-float-left">
{{ data.updatedAt | localDatetime }}
</ion-item>
<ion-item lines="none" class="ion-float-right">
<ion-tab-button (click)="menu(data._id, data.title, data.description, data.visibility)">
<ion-icon name="ellipsis-vertical-outline"></ion-icon>
</ion-tab-button>
</ion-item>
<ion-item lines="none" *ngIf="data.marking" class="w-100">
<ion-label class="w-100" *ngIf="data.marking">{{ data.marking }}</ion-label>
</ion-item>
</ion-card-content>回答 1
Stack Overflow用户
发布于 2021-03-12 04:18:17
我用JQuery创建了一个筛选器，基本的筛选器，也许有人可以帮助改进:-)
但是这个搜索是大小写敏感的，该如何解决呢？
<ion-searchbar (ionInput)="filterChannel($event.target.value)"></ion-searchbar>JQuery代码
filterChannel(search: any) {
$("ion-card-title").each(function () {
if ($(this).text().indexOf(search) != -1) {
$(this).closest("ion-card").removeClass('d-none');
}
else {
$(this).closest("ion-card").addClass('d-none');
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66585417
复制相关文章
相似问题
腾讯云开发者
