角度过滤器:如何预过滤，以便角度过滤器只考虑整个数据对象的一部分 [英] Angular Filters: How to pre-filter so angular filters consider only a partial of the whole data object

问题描述

我有一个包含多个列的大型数据表(它从 json api 获取数据)，并希望实现多个过滤器，执行以下操作:

1. 选择应考虑哪个数据列的选项(包含 thead 选项的下拉列表)[my columnFilter]然后
2. 用于过滤特定数据部分的输入字段 [my searchFilter]

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

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

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

这是我的一些代码:

 选择数据列:<select ng-model="columnFilter" ng-options="heading for headers"></选择>

<div class="col-sm-12">过滤器选择:<input type='text' ng-model="searchFilter"/>

<table class="table table-bordered"><头><tr><th>URL</th><th>Title</th><th>交通</th><第>描述<th>ID</th></tr></thead><tbody ng-repeat="url in url | 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>

以及指向工作 plunker 的链接:http://plnkr.co/edit/TddllGiey0RmCx18eVdd?p=预览

解决方案

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

1. 定义自定义过滤器
2. 定义一个函数来过滤数据并使用 ng-show 或 ng-hide 调用它

<块引用>

我有一个大数据表

如果我理解得很好，你会指出这是因为性能是一个大问题.

有一篇很好的文章揭示了这两种解决方案之间的差异:http://www.bennadel.com/blog/2487-filter-vs-nghide-with-ngrepeat-in-angularjs.htm

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

在您看来:

在您的控制器中:

$scope.searchFilter = "";$scope.columnFilter = $scope.headings[5];$scope.filterUrl = 函数(网址){if(!$scope.searchFilter || $scope.searchFilter == "")返回网址；var searchFilter= $scope.searchFilter.toLowerCase();var trafficString = url.traffic.toString();var idString = url.traffic.toString();开关($scope.columnFilter){案例 $scope.headings[0]:返回 url.title.toLowerCase().indexOf(searchFilter) != -1;案例 $scope.headings[1]:返回 url.url.toLowerCase().indexOf(searchFilter) != -1;案例 $scope.headings[2]:返回trafficString.indexOf(searchFilter) != -1;案例 $scope.headings[3]:返回 url.descr.toLowerCase().indexOf(searchFilter) != -1;案例 $scope.headings[4]:返回 idString.indexOf(searchFilter) != -1;案例 $scope.headings[5]:返回 url.title.toLowerCase().indexOf(searchFilter) != -1 ||url.url.toLowerCase().indexOf(searchFilter) != -1 ||TrafficString.indexOf(searchFilter) != -1 ||url.descr.toLowerCase().indexOf(searchFilter) != -1 ||idString.indexOf(searchFilter) != -1;}};

更新:如果您选择第一种方法:

在您看来:

过滤器:

app.filter('filterByColumn', function(){返回函数(网址，文本，列过滤器){var 处理 = [];if(!text || text == "")返回网址；urls.forEach(函数(url){var searchFilter= text.toLowerCase();var trafficString = url.traffic.toString();var idString = url.traffic.toString();开关(列过滤器){案例标题":if( url.title.toLowerCase().indexOf(searchFilter) != -1)处理.推送(网址)；休息;案例网址":if(url.url.toLowerCase().indexOf(searchFilter) != -1)处理.推送(网址)；休息;案例交通":if(trafficString.indexOf(searchFilter) != -1)处理.推送(网址)；休息;案例说明":if(url.descr.toLowerCase().indexOf(searchFilter) != -1)处理.推送(网址)；休息;案例ID":如果(idString.indexOf(searchFilter)！= -1)处理.推送(网址)；休息;案例全部":if( url.title.toLowerCase().indexOf(searchFilter) != -1 ||url.url.toLowerCase().indexOf(searchFilter) != -1 ||TrafficString.indexOf(searchFilter) != -1 ||url.descr.toLowerCase().indexOf(searchFilter) != -1 ||idString.indexOf(searchFilter) != -1)处理.推送(网址)；休息;}});退货处理；};});

这是一个 plunkr:http://plnkr.co/edit/xCwI2AURFpvb6xHgYHxS?p=preview

I got a large data table (which gets its data from a json api) with multiple columns and would like to implement multiple filters doing the following:

1. an option to select which data-column should be considered (a dropdown containing the thead option) [my columnFilter] and then
2. an input field to filter that particular data-partial [my searchFilter]

I've got the searchFilter working, but I'm not sure how to connect the columnFilter and make the searchFilter only apply to the selected data-partial.

So let's say I'd like to only see Descriptions containing the world "blue".

How can I bind these two filters and make this work?

Here is some of my code:

  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>

and a link to a working plunker: http://plnkr.co/edit/TddllGiey0RmCx18eVdd?p=preview

解决方案

As far as i know angular, there is two main way to solve your problem.

1. define a custom a filter
2. define a function to filter your data and call it with ng-show or ng-hide

I got a large data table

If i understand well, you specify that because performance is a big issue.

There is a good article which exposes the differences between those two solutions : http://www.bennadel.com/blog/2487-filter-vs-nghide-with-ngrepeat-in-angularjs.htm

As performance may be really important for you, i suggest you the second approach.

In your view:

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

In your controller:

$scope.searchFilter = "";
$scope.columnFilter = $scope.headings[5];

$scope.filterUrl = function(url){ 
  if(!$scope.searchFilter || $scope.searchFilter == "")
    return url;
  var searchFilter= $scope.searchFilter.toLowerCase();
  var trafficString = url.traffic.toString();
  var idString = url.traffic.toString();
  switch($scope.columnFilter){
    case $scope.headings[0]:
      return url.title.toLowerCase().indexOf(searchFilter) != -1;
    case $scope.headings[1]:
      return url.url.toLowerCase().indexOf(searchFilter) != -1;
    case $scope.headings[2]:
      return trafficString.indexOf(searchFilter) != -1;
    case $scope.headings[3]:
      return url.descr.toLowerCase().indexOf(searchFilter) != -1;
    case $scope.headings[4]:
      return idString.indexOf(searchFilter) != -1;
    case $scope.headings[5]: 
      return url.title.toLowerCase().indexOf(searchFilter) != -1 ||
      url.url.toLowerCase().indexOf(searchFilter) != -1 ||
      trafficString.indexOf(searchFilter) != -1 ||
      url.descr.toLowerCase().indexOf(searchFilter) != -1 ||
      idString.indexOf(searchFilter) != -1;
  }
};

Update: If you choose the first approach:

In your view:

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

The filter:

app.filter('filterByColumn', function(){
  return function(urls, text, columnFilter){
    var processed = [];
     if(!text || text == "")
        return urls;
    urls.forEach(function(url){
      var searchFilter= text.toLowerCase();
      var trafficString = url.traffic.toString();
      var idString = url.traffic.toString();
      switch(columnFilter){
        case "Title":
          if( url.title.toLowerCase().indexOf(searchFilter) != -1)
            processed.push(url);
          break;
        case "Url":
          if(url.url.toLowerCase().indexOf(searchFilter) != -1)
            processed.push(url);
          break;
        case "Traffic":
          if(trafficString.indexOf(searchFilter) != -1)
            processed.push(url);
          break;
        case "Description":
          if(url.descr.toLowerCase().indexOf(searchFilter) != -1)
            processed.push(url);
          break;
        case "Id":
          if( idString.indexOf(searchFilter) != -1)
            processed.push(url);
          break;
        case "All": 
          if( url.title.toLowerCase().indexOf(searchFilter) != -1 ||
          url.url.toLowerCase().indexOf(searchFilter) != -1 ||
          trafficString.indexOf(searchFilter) != -1 ||
          url.descr.toLowerCase().indexOf(searchFilter) != -1 ||
          idString.indexOf(searchFilter) != -1)
            processed.push(url);
          break;
      }
    });
    return processed;
  };
});

Here is a plunkr: http://plnkr.co/edit/xCwI2AURFpvb6xHgYHxS?p=preview

这篇关于角度过滤器:如何预过滤，以便角度过滤器只考虑整个数据对象的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！