Question

我有一个工作表代码：

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

<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>

Answer 1

搜索文字应为<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link href="../Content/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <script src="../Scripts/jquery-1.8.0.min.js"></script> <script src="../Scripts/jquery.mobile-1.4.5.min.js"></script> <link rel="stylesheet" type="text/css" href="css/index.css">  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <title>HR Tips App</title> </head> <body>  <div data-role="page" id="Opening" class="Opening"> <div data-role="content"> <div><img style="width:135px" src="images/Logo2.png" /></div> <div class="headerText"><span></span></div> </div> <div class="footer" data-role="content"> <div> <span></span> </div> </div> </div>  <div data-role="page" id="Opening2" class="Opening2"> <div data-role="header" data-theme="b" class="header"> <div class="ui-mini ui-btn-left"><img style="width:100px" src="images/Logo2.png" /></div> <h4>HR Tips</h4> </div> <div data-role="content" role="main" class="ui-content" id="Open2" style="background-color: rgba(0, 0, 0, 0.5);background-image: url('images/Open2.png');"> <div class="Start">Why this app?</div> <div class="Middle"> <div class="MainOpen"> <span> Managing relationships in the workplace<br /> can be not only rewarding but also<br /> sometimes chalenging...lorem ipsum dolor <br />sit amet, lorem ipsum dolor sit amet lorem <br />sit amet, lorem ipsum dolor sit amet </span> </div> <div class="EndingOpen"> <div>Lets get started</div> <div><a href="Pages/ManagerList.html" data-transition="slideup"><img class="button" src="images/JLL_Icon_White_Next.png" style="border-width:1px;" /></a></div> </div> </div> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="scripts/platformOverrides.js"></script> <script type="text/javascript" src="scripts/index.js"></script> <script type="text/javascript" src="scripts/ManagerLists.js"></script> </body> </html>

filter : config.domain

角动态搜索框用于表列过滤

1 个答案: