Javascript 角度滤波器：如何预滤波，角度滤波器只考虑整个数据对象的一部分

我得到了一个包含多列的大型数据表（它从json api获取数据），并希望实现多个过滤器，执行以下操作：

选择应考虑哪个数据列的选项（包含thead选项的下拉列表）[my columnFilter] 然后

用于筛选特定数据部分的输入字段[my searchFilter]

我已经让searchFilter工作了，但我不确定如何连接columnFilter并使searchFilter仅应用于所选的部分数据

假设我只想看到包含世界“蓝色”的描述

如何绑定这两个过滤器并使其工作

以下是我的一些代码：

  Select data column:
  <select ng-model="columnFilter" ng-options="heading for heading in headings">
  </select>
</div>
<div class="col-sm-12">
   Filter selection: <input type='text' ng-model="searchFilter" />
</div>
<table class="table table-bordered">
    <thead>
      <tr>
        <th>URL</th>
        <th>Title</th>
        <th>Traffic</th>
        <th>Description</th>
        <th>ID</th>
      </tr>
  </thead>
  <tbody ng-repeat="url in urls | filter:searchFilter">
    <tr>
      <td>{{url.url}}</td>
      <td>{{url.title}}</td>
      <td>{{url.traffic}}</td>
      <td>{{url.descr}}</td>
      <td>{{url.id}}</td>
    </tr>
    </tbody>
</table>

选择数据列：
过滤器选择：
统一资源定位地址
标题
交通
描述
身份证件
{{url.url}
{{url.title}
{{url.traffic}
{{url.descr}}
{{url.id}

---

还有一个指向工作plunker的链接：

请直接从创建自定义过滤器的页面查看此示例

---

您可以在这里看到，您可以创建一个过滤器，它接受两个输入：实际对象和一个参数。通过将列名作为参数传递，可以缩小对正确行的搜索范围。

我建议您编写这样的简单自定义筛选器

.filter('myfilter', function(){
  return function(input, column, text){
    if (!input || !column || !text) return input;
    return input.filter(function(item){
      var value = item[column.toLowerCase()];
      if (!value)return false;
      return value.indexOf(text)>-1;
    });
  };
});

您可以在html中使用此筛选器

ng-repeat="url in urls | myfilter:columnFilter:searchFilter"

---

据我所知，有两种主要方法可以解决您的问题

定义自定义过滤器

定义一个函数来过滤数据，并使用ng show或ng hide调用它

我有一个大数据表

如果我理解得很好，您可以指定这一点，因为性能是一个大问题

有一篇好文章揭示了这两种解决方案之间的差异：

由于性能可能对您非常重要，我建议您采用第二种方法

在你看来：

<tbody ng-repeat="url in urls" ng-show="filterUrl(url)">

 <tbody ng-repeat="url in urls | filterByColumn: searchFilter :columnFilter">

更新： 如果选择第一种方法：

在你看来：

<tbody ng-repeat="url in urls" ng-show="filterUrl(url)">

 <tbody ng-repeat="url in urls | filterByColumn: searchFilter :columnFilter">

---

这是一个plunkr:

谢谢-我尝试了你的plunker，但searchFilter不起作用-知道如何解决吗？为了使示例尽可能简单，我使用Array.filter实现了过滤功能。如果使用不支持Array.filter的旧浏览器，则此示例无法正常工作。我的chrome（和Firefox）可以正常工作。当然，您需要做一些更改以支持旧浏览器。顺便说一句，这是一个使用下划线.js来支持旧浏览器的程序。我的IE9工作得很好。太棒了，它正按照我想要的方式工作，这篇文章也很有帮助。不过还有一个问题——结合这两个过滤器只是我最终想要构建的第一步：4个链接在一起的过滤器（类似于google analytics在这里使用的过滤器：过滤器1：包含/排除过滤器2：选择列（此处已解决）过滤器3：不同的过滤器选项（包括、开始于、等于等）filter4：输入字段（如此处所示），您仍然建议定义函数还是最好使用自定义筛选器？您能给我一个显示行数的近似值吗？100？500？1000？更多？当然-在700-1000之间您会在其他页面上重复使用这些筛选器吗？（分开或组合）如果回答是“是”，那么我建议您使用过滤器。非常感谢您的帮助-希望我能再次对此进行升级。检查了plunker，但最新版本（25）似乎不起作用（数据表几乎为空）谢谢你-我对angular还不太熟悉，不知道如何将这个例子转移到我的案例中。你能给我指出正确的方向吗？