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）产品是过滤器的输入

2）categoryProductsSearchFilter是过滤器名称

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

问题是以上内容并未过滤该特定产品，而是显示所有产品，这意味着{title：'Document Cloud'}无效。

Answer 1

您需要输入ng-model，它将按标题过滤您的对象。比你重复只需按查询添加过滤器

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

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

1 个答案: