带有要搜索的动态属性列表的角度过滤器 [英] 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-repeat 更改为过滤如下:

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.

我的问题是:

我怎样才能创建一个真正通用的绑定下拉和搜索框.将接收可搜索的属性并适当地处理过滤?(最好不要使用 ng-show 或进行 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).

如果需要，希望提供更多详细信息.

would love to supply more details if needed.

推荐答案

这个怎么样?

filter 过滤器支持对象语法作为参数，其中键是搜索字段，值是搜索查询.例如，在您的模板中:

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}">

将根据查询按品牌过滤列表，并且

would filter the list by brand according to the query, and

<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 的值，但 这在 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屋！