javascript - AngularJS使用过滤器根据属性值查找特定项目

Question

我的情况是: 自定义过滤器返回 JSON 格式的 Product 类型的对象数组。每个产品对象都有 4-5 个属性，包括标题。

在 div 元素中，我想稍后使用标题为“Document Cloud”的产品的属性

基于这个答案How to filter by object property in angularJS我将 HTML 代码编写为:

<div ng-repeat="product in filteredTopProducts=((products | categoryProductsSearchFilter:searchData:{title:'Document Cloud'}))" class='top-product-icon' ng-click="productClicked(product)">

    <img class='top-product-icon-img' ng-src="{{product.thumbnail}}"/>
    <div class='top-product-icon-title' ng-bind="product.title"></div>
</div>

1) products 是过滤器的输入

2)categoryProductsSearchFilter是过滤器名称

3) searchData 是一个文本框模型名称 (ng-model)，用户可以从中手动搜索和过滤产品

问题在于，上述内容并未过滤该特定产品，而是显示所有产品，这意味着 {title:'Document Cloud'} 无法正常工作。

Answer 1

您需要使用 ng-model 进行输入，它将按标题过滤您的对象。比在 ng-repeat 中只需按查询添加过滤器

<label for="filter">Filter by title</label>
<input type="text" ng-model="query.title">
<div ng-repeat="product in products | filter:query" ng-click="productClicked(product)">

指定要应用过滤器的属性

<input type="text" ng-model="queryTitle"> 
<div ng-repeat="product in products | filter:{ title: queryTitle }">