CODEWITHSUNDEEP
javascriptangularjs
Piyush-Ask Any Difference
Piyush-Ask Any Difference

Reputation: 4286

AngularJS Find a specific item based on property value using filter

The situation I have is: The custom filter is returning an array of object of type Product in JSON. Each product object has 4-5 properties including the title.

In a div element, I want to later use the properties of a product with title "Document Cloud"

Based on this answer How to filter by object property in angularJS I have written the HTML code as:

<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 is the input to filter

2) categoryProductsSearchFilter is the filter name

3) searchData is a textbox model name (ng-model) from where the user can search and filter products manually

The problem is that the above is not filtering that particular product but is displaying all products which means {title:'Document Cloud'} is not working.

Upvotes: 0

Views: 1294

Answers (1)

Valery Bugakov
Valery Bugakov

Reputation: 355

You need input with ng-model that will filter your objects by title. Than in you ng-repeat just add filter by query

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

Specify the property where you want the filter to be applied

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

Upvotes: 1

Related Questions