时间戳

首页 > 解决方案 > 用于表列过滤的角度动态搜索框

javascript - 用于表列过滤的角度动态搜索框

问题描述

我有一个工作表代码：

我只想添加一个动态搜索框来过滤此表的列名域。当用户输入一个新的字符输入时（它将在列域中搜索），该表将被过滤。

<mat-table #table [dataSource]="Domain_Data">
          <ng-container cdkColumnDef="id">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%">Id</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="15%">{{config.id}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="domain">
            <mat-header-cell *cdkHeaderCellDef fxFlex="50%">Domain</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="50%">{{config.domain}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="disable">
            <mat-header-cell *cdkHeaderCellDef fxFlex="30%">Disabled</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="30%">{{config.disable}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="button">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%">Delete</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="15%"> <mat-icon (click)="deleteDomain(config)">delete_forever</mat-icon></mat-cell>
          </ng-container>

          <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *cdkRowDef="let config; columns: displayedColumns;"></mat-row>

</mat-table>

如您所见，我的表的数据源名称是 Domain_data，我尝试使用搜索框代码来使用它，但无法实现。我该如何绑定这些？

 <div ng-controller="charactersCtrl">
          <input ng-model="config.domain" placeholder="Search domain here">
          <ul>
            <li ng-repeat="c in characters | filter : searchText">
              {{ c }}
            </li>
          </ul>
        </div>

标签： javascripthtmlangularjs

解决方案

搜索文本应该是filter : config.domain

<div ng-controller="charactersCtrl">
      <input ng-model="config.domain" placeholder="Search domain here">
      <ul>
        <li ng-repeat="c in characters | filter : config.domain">
          {{ c }}
        </li>
      </ul>
    </div>

推荐阅读