如何使用 Angular 管道设置或过滤多列

Question

我正在使用 here 的参考并能够实现结果。

这是我的 table：

当我输入 ID 时，我可以看到结果。但是当我输入 quantity/date 时，它没有显示任何结果。

我希望能够按 ID、数量或日期进行过滤。有什么办法可以做到吗？

这是我当前的代码：

<form>
    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" name="searchString" placeholder="Search" [(ngModel)]="searchString">
        </div>
    </div>
</form>
<table class="table">
    <tr>
        <th>ID</th>
        <th>Quantity</th>
        <th>Date</th>
    </tr>
    <tr *ngFor="let bot of bots | filter : searchString;">
            <td>{{bot.id}}</td>
            <td>{{bot.Qty}}</td>
            <td>{{bot.Date}}</td>
    </tr>
</table>

filter.pipe:

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

@Pipe({
    name: 'filter',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], term): any {
        console.log('term', term);

        return term 
            ? items.filter(item => item.title.indexOf(term) !== -1)
            : items;
    }
}

Answer 1

<tr *ngFor="let bot of bots | filter : searchString;">

只需删除此 : 'id'，它将适用于所有字段！

编辑 1：

请按照此更新您的过滤器

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

@Pipe({
    name: 'filter',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], term): any {
        console.log('term', term);

        return term 
            ? items.filter(item => item.title.indexOf(term) !== -1)
            : items;
    }
}

只是为了更新这一行给你带来问题

if (!field || !value) {
            return items;
        }

Answer 2

你可以试试这个..

<tr ng-repeat="let bot of bots | filter : 'id' : searchString;" | filter:ageFilter">

$scope.ageFilter = function (bot) {
    return (bot.age > $scope.min_age && player.age < $scope.max_age);
}

如何使用 Angular 管道设置或过滤多列

How to set or condition in filtering multiple columns using Angular pipe

angularjs

angular-pipe