Блог

В настоящее время у меня есть фильтр по полу и влиянию на таблицу, который может фильтровать данные по выбранному варианту.

Например, Если вы выберете Male, он будет фильтровать мужские данные и то же самое для female, impact: применимо и неприменимо.

Теперь я хотел добавить кнопку apply, которая объединит их вместе и отфильтрует. После нажатия на кнопку применить, которая будет фильтровать комбинацию данных обоих.

Может кто-нибудь, пожалуйста, помочь мне с требованием?

Код:

 <div class="filter-data clearfix">
    <form #form="ngForm">
      <div class="form-group float-left mr-4">
        <strong>Gender</strong>
        <br>
        <select class="form-control form-control-sm" name="gender" ngModel>
          <option></option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
      <div class="form-group float-left">
        <strong>Impact</strong>
        <br>
        <select class="form-control form-control-sm" name="impact" ngModel>
          <option></option>
          <option value="Applicable">Applicable</option>
          <option value="Not Applicable">Not Applicable</option>
        </select>
      </div>
      <div class="form-group float-left mt-4 ml-2">
        <button type="button" class="btn btn-primary btn-sm mr-2">Apply</button>
        <button type="button" class="btn btn-secondary btn-sm">Reset</button>
      </div>
    </form>
  </div>

<table class="table table-sm table-responsive">
      <thead>
        <tr>
          <th>
            <input type="checkbox" name="allNonTrades" (change)="selectAllClicked($event)">
          </th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Gender</th>
          <th>DOB</th>
          <th>Impact</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="record-row" (click)="viewUser(user)" *ngFor="let user of allUser | tableFilter: form.value | paginate: { id: 'listing_pagination', itemsPerPage: 10, currentPage: page, totalItems: totalRecords }">
          <td><input *ngIf="!isEdit"  name="nontrades" [checked]="user.selected" (change)="changeTradesByCategory($event)" [(ngModel)]="user.checked" type="checkbox" (change)="checkboxClicked()"></td>
          <td>{{user.first_name}}</td>
          <td>{{user.last_name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.gender}}</td>
          <td>{{user.dob}}</td>
          <td>{{user.impact}}</td>
          <td>
            <button *ngIf="!isEdit" class="btn btn-primary btn-sm" (click)="editUser(user)">Edit</button>
            <button class="btn btn-primary btn-sm btn-sm ml-2" (click)="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
 

таблица-filter.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'tableFilter'
})

export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: Object) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = user => keys.every(key => user[key] === filters[key]);
    return keys.length ? list.filter(filterUser) : list;
  }
}
 

Просто добавьте [ngModelOptions]=»{updateOn: ‘submit’}» в теги выбора пола и воздействия. Это позволяет form.value обновлять только при отправке и, следовательно, соответствующим образом изменять tableFilter: form.value и фильтровать.

 <select class="form-control form-control-sm" name="gender" ngModel [ngModelOptions]="{updateOn: 'submit'}">


<select class="form-control form-control-sm" name="impact" ngModel [ngModelOptions]="{updateOn: 'submit'}">
 

Наконец, измените тип кнопки «Применить» на «Отправить»

 <button type="submit" class="btn btn-primary btn-sm mr-2">Apply</button>