与属性搜索的动态列表过滤角 [英] angular filter with dynamic list of attributes to search

问题描述

我的目标是创建一个搜索框，将通过搜索所有字段，或者通过特定属性过滤的集合。这将通过选择来决定。

my goal it to create a search box that will filter a collection either by searching all the fields, or by a specific attribute. this will be determined by a select.

所以，这里是我得到

它能够通过特定的属性进行搜索，果然，用这种自定义过滤器：
我的html -

it is able to search by specific attribute, as expected, using this custom filter: my html-

<tr ng-repeat="smartphone in smartphones | filter: search ">

JS-

$scope.search = function (item){
  if (item[$scope.selectedSearchBy].indexOf($scope.query)!=-1) {
    return true;
  }
  return false;
};

请注意，为了在所有领域的搜索，我可以改变我的NG-重复被过滤如下：

note that in order to search on all of the fields, i can change my ng-repeat to be filtered as following:

<tr ng-repeat="smartphone in smartphones | filter:query ">

和它的工作。

但是，这两个不会一起工作。

However, both will not work together.

的我的问题是的：

如何创造一个真正通用的绑定下拉和搜索框。将接收搜索的属性和照顾过滤appropriatly？的
（preferably不使用NG-节目或进行DOM操作）。

how can i create a truly generic binded dropdown and search box. that will receive the searchable attributes and take care of the filtering appropriatly? (preferably without using ng-show or making DOM manipulations).

愿意提供更多的细节。

推荐答案

这个怎么样？

的过滤器的过滤器支持的对象语法作为参数，其中最关键的是搜索字段和值是搜索查询。例如，在你的模板：

The filter filter supports the object syntax as an argument where the key is the search field and the value is the search query. For example, in your template:

<tr ng-repeat="smartphone in smartphones | filter:{brand: query}">

按品牌的过滤器会根据在查询名单和

<tr ng-repeat="smartphone in smartphones | filter:{'$': query}">

将搜索所有字段。所以，如果只是有办法做到这一点。

would search all the fields. So if only there's a way to do this

<tr ng-repeat="smartphone in smartphones | filter:{selectedSearchBy: query}">

在对象的键设置为变量 selectedSearchBy 的价值，但<一href=\"http://stackoverflow.com/questions/6500573/dynamic-keys-for-object-literals-in-javascript\">this不可能在JavaScript ，所以我写了一个辅助函数来做到这一点：

where the key of the object is set to the value of the variable selectedSearchBy, but this isn't possible in javascript, so I wrote a helper function to do it:

<tr ng-repeat="smartphone in smartphones | filter:filterParam(selectedSearchBy, query)">

这篇关于与属性搜索的动态列表过滤角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！