Javascript 使用AngularJS通过查询数组创建即时搜索

这将是一个相当冗长的问题，所以请容忍我

我有一个大约25-30个项目的数组。它们通过各种过滤器进行分类，如品牌、类型、材料、尺寸等。。如何构建可搜索的过滤器。我看到的所有过滤器中都包含一个

过滤器：query |

。但是，我无法让我的数组查询现有数组

下面是我的数组的外观，只显示1个项目以减小大小

$scope.products = [
{
src: 'images/img/image1.jpg',
name:  'XXX-1A',
brand: 'Brand A',
material: 'dry',
size: '00',
type: 'dry pipe',
color:'red'
}];

过滤功能（仅包含1个以节省空间）：

$scope.brandIncludes=[]；
$scope.includeBrand=功能（品牌）{
变量i=$.inArray（品牌，$scope.brandIncludes）；
如果（i>-1）{
$scope.BRAND包括拼接（i，1）；
}否则{
$scope.brandIncludes.push（品牌）；
}
}
$scope.brandFilter=功能（产品）{
如果（$scope.brandIncludes.length>0）{
如果（$.inArray（products.brand，$scope.brandIncludes）<0）
返回；
}
返回true；
}

这是我用于从HTML中筛选的内容，我使用复选框选择每个筛选器：

<div class="info" ng-repeat="p in products |  
filter:brandFilter | 
filter:materialFilter | 
filter:typeFilter | 
filter:styleFilter">
</div>

我的搜索栏标记：

  <div class="filtering">
    <div class="search-sect">
     <input name="dbQuery" type="text" placeholder="Search pieces" class="search-input" ng-model="query"/>
  </div>

过滤器的一个标记：

<input type="checkbox" ng-click="includeStyle('adaptor')"/>Adaptor<br>

适配器

现在您已经掌握了所有代码，下面是我尝试过的一些似乎运行不正常的东西：

我的尝试：

搜索栏：

  <input type="text" id="query" ng-model="query"/>

过滤器：

<li ng-repeat="p in products | filter:query | orderBy: orderList">

我明白，对于一些有经验的angular来说，这是一项相对容易的任务，但我只是在学习，似乎无法专心搜索查询。这可能是我忽略的一个简单的解决方案。这是我的第一个Angular应用程序，为了学到更多，我正在尝试咬下我无法咀嚼的东西

感谢所有回复，提前感谢

---

根据要求：

简单的内置角度过滤器不够智能，无法使用您的复选框设计，因此请尝试编写自定义过滤器。您需要将您提到的复选框绑定到范围中的变量，例如

brandFilterIsEnabled

。有关详细信息，请参见教程。下面是一个工作示例

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'ctrl'，函数（$scope）{
$scope.items=[{
姓名：'foo'，
颜色：'红色'
},{
名称：'bar'，
颜色：'蓝色'
},{
名称:"baz",，
颜色：'绿色'
}];
$scope.searchNames=true；
$scope.searchColors=true；
$scope.$watch（'searchColors'，function（）{
$scope.searchKeys=[$scope.searchNames？'name'：null，$scope.searchColors？'color'：null]；
});
$scope.$watch（'searchNames'，function（）{
$scope.searchKeys=[$scope.searchNames？'name'：null，$scope.searchColors？'color'：null]；
});
});
myApp.filter（'advancedSearch'，函数（$filter）{
返回函数（数据、键、查询）{
结果=[]；
如果（！查询）{
返回数据；
}否则{
角度forEach（数据、功能（obj）{
var匹配=假；
角度。forEach（键，函数（键）{
if（obj[key]）{
//使用angular的内置过滤器匹配值
if（$filter（'filter'）（[obj[key]]，query）.length>0）{
//如果有多个对象，则不要向结果中添加两次对象
//键具有与查询匹配的值
如果（！匹配）{
结果：推挤（obj）；
}
匹配=真；
}
}
});
});
}
返回结果；
};
});

搜索名称
搜索颜色
搜索对象


{{item.name}


。。。。您不需要自定义筛选器。。。。。为此编写一些简单的自定义筛选器…嗯？其中一个肯定是不相关的？为了确保我理解您，您示例中的
：query
是搜索选项？然后检查以前的筛选器是否已启用？抱歉，请快速重写答案。我的意思是，通过添加复选框启用和禁用部分搜索范围，将需要自定义过滤器。刚刚意识到我忘了包括我在JS中使用的过滤方法，编辑了我的问题以包括this@user4470749正确，query是绑定到文本字段搜索框的值。过滤器的第二个输入是布尔标志，它告诉过滤器是否启用了它。你能设置一个JSFIDLE吗？当然，我现在把所有的东西都放在一个代码笔中，更新到我的问题上。
<li ng-repeat="p in products | filter:query | orderBy: orderList">