使用ng-repeat生成的表上的独立过滤字段

Question

在我的Angular项目中，我有一个用ng-repeat生成的表，它应该通过四个独立的字段进行过滤，如下图所示：

我的问题是，我该如何制作它，以便我在其中一个查询字段中键入的内容不会干扰其他字段？例如：在PROJECTS SUPPORT列上键入PROJECT NAME仍然会按预期过滤表格，但它不应该。

我想我想要的是为每列提供单独的范围，而只要其中一个过滤器被激活，给定的行就会消失。

这是在表格标题和输入字段下面生成表格的代码：

<tr ng-repeat="item in page2ctrl.projects | filter:query.name | filter:query.budget | filter:query.period | filter:query.partners">
    <td>
        <label class="checkbox-inline">
            <input type="checkbox" ng-model="page2ctrl.projects[$index].isSelected">
            <p><span></span><p>
        </label>
    </td>
    <td><p><strong>{{item.name}}</strong></p></td>
    <td><p>{{item.budget}}</p></td>
    <td><p>{{item.startDate}}</p></td>
    <td><p>{{item.partners}}</p></td>
</tr>

我如何＆＃34;个性化＆＃34;过滤查询？

Answer 1

我认为你可以使用表达式的对象形式来做到这一点。例如，按名称过滤的内容如下所示：

filter:{ name: query.name }

我并非100％确定能够正常工作，因为我自己并没有尝试过这种特殊方法。另一方面，你绝对可以使用谓词函数或自定义过滤器。

请参阅https://docs.angularjs.org/api/ng/filter/filter

Answer 2

您的过滤器只是字符串。所以过滤器不知道，要在哪个键上过滤。在每个过滤器上指定一个键，以阐明每个过滤器应过滤的键。像这样：

<tr ng-repeat="item in page2ctrl.projects | filter: { name: query.name } | filter: { budget: query.budget } | filter: { startDate: query.period } | filter: { partners: query.partners }">
    <td>
        <label class="checkbox-inline">
            <input type="checkbox" ng-model="page2ctrl.projects[$index].isSelected">
            <p><span></span><p>
        </label>
    </td>
    <td><p><strong>{{item.name}}</strong></p></td>
    <td><p>{{item.budget}}</p></td>
    <td><p>{{item.startDate}}</p></td>
    <td><p>{{item.partners}}</p></td>