角过滤器：如何pre-过滤器，过滤器角只考虑局部整个数据对象 [英] Angular Filters: How to pre-filter so angular filters consider only a partial of the whole data object
问题描述
我有一个大的数据表与多个列（从一个JSON API获取数据），并想实现多个过滤器执行以下操作：
- 选项来选择哪些数据列应考虑（包含THEAD选项下拉）[我columnFilter]
然后 - 输入字段来过滤特定的数据偏[我searchFilter]
我已经得到了searchFilter工作，但我不知道如何连接columnFilter，使searchFilter仅适用于选定数据的部分。
因此，让我们说，我想只能看到包含世界说明蓝色。
我怎样才能结合这两个过滤器，使这项工作？
下面是我的一些code的：
选择数据列：
＆LT;选择NG模型=columnFilterNG选项=标题为标题，标题为＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-SM-12＆GT;
过滤器选择：其中;输入类型='文本'NG模型=searchFilter/＆GT;
＆LT; / DIV＆GT;
＆LT;表类=表表镶上＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i个URL＆LT; /第i
＆LT;第i个标题＆LT; /第i
＆LT;第i个交通与LT; /第i
＆LT;第i说明＆LT; /第i
＆LT;第i个ID＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT; TBODY NG重复=网址URL中|过滤器：searchFilter＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT; {{url.url}}＆下; / TD＆GT;
＆所述; TD＆GT; {{url.title}}＆下; / TD＆GT;
＆所述; TD＆GT; {{url.traffic}}＆下; / TD＆GT;
＆所述; TD＆GT; {{url.descr}}＆下; / TD＆GT;
＆所述; TD＆GT; {{url.id}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
和到工作plunker的链接： http://plnkr.co/edit / TddllGiey0RmCx18eVdd？p = preVIEW
据我所知棱角分明，有解决你的问题，有两种主要方式。
- 定义自定义过滤器
- 定义一个函数来过滤数据，并与NG-显示或NG隐藏称之为
我有一个大的数据表
如果我理解不错，您可以指定，因为性能是一个大问题。
有是暴露了这两个方案之间的差异一篇好文章：的http://www.bennadel.com/blog/2487-filter-vs-nghide-with-ngrepeat-in-angularjs.htm
随着性能可能对你真的很重要，我建议你采用第二种方式。
在您的视图：
＆LT; TBODY NG重复=网址URL中NG秀=filterUrl（URL）＆GT;在你的控制器：
$ scope.searchFilter =;
$ scope.columnFilter = $ scope.headings [5];$ scope.filterUrl =功能（URL）{
如果（！$ scope.searchFilter || $ scope.searchFilter ==）
返回URL;
变种searchFilter = $ scope.searchFilter.toLowerCase（）;
变种trafficString = url.traffic.toString（）;
变种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;
}
};更新：
如果你选择第一种方式：在您的视图：
＆LT; TBODY NG重复=网址URL中| filterByColumn：searchFilter：columnFilter＆GT;过滤器：
app.filter（'filterByColumn'，函数（）{
返回功能（网址，文字，columnFilter）{
无功处理= [];
如果（！文本||文本==）
返回的网址;
urls.forEach（函数（URL）{
变种searchFilter = text.toLowerCase（）;
变种trafficString = url.traffic.toString（）;
变种idString = url.traffic.toString（）;
开关（columnFilter）{
案标题：
如果（url.title.toLowerCase（）。的indexOf（searchFilter）！= - 1）
processed.push（URL）;
打破;
案URL：
如果（url.url.toLowerCase（）。的indexOf（searchFilter）！= - 1）
processed.push（URL）;
打破;
案交通：
如果（trafficString.indexOf（searchFilter）！= - 1）
processed.push（URL）;
打破;
案说明：
如果（url.descr.toLowerCase（）。的indexOf（searchFilter）！= - 1）
processed.push（URL）;
打破;
案标识：
如果（idString.indexOf（searchFilter）！= - 1）
processed.push（URL）;
打破;
案全部：
如果（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）;
打破;
}
}）;
返回处理;
};
}）;下面是一个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:
- an option to select which data-column should be considered (a dropdown containing the thead option) [my columnFilter] and then
- 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.
- define a custom a filter
- 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
这篇关于角过滤器：如何pre-过滤器，过滤器角只考虑局部整个数据对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
