时间戳

首页 > 解决方案 > 在 Ionic / Angular 离子卡上创建 DOM 过滤器

angular - 在 Ionic / Angular 离子卡上创建 DOM 过滤器

问题描述

离子项目有一个离子卡，它工作正常，问题是列表正在增长，我需要设置一个字段来过滤搜索，离子有没有本地方法可以做到这一点？或者我必须使用 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>

标签： angularionic-framework

解决方案

我使用 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');
      }
    });
  }

推荐阅读