0

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.

Community
  • 1
  • 1
Piyush-Ask Any Difference
  • 4,294
  • 5
  • 46
  • 92

1 Answers1

1

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 }">
Valery Bugakov
  • 355
  • 1
  • 10
  • You have a good answer Here. But in my opinion the setting of the var (query) dont really marrer. The Problem here was the messy syntax of the filter And you provided a good exemple – Okazari May 27 '15 at 06:53
  • is it good practice to write a separate filter for returning the specific products which I want to be filtered? Don't you think the above code may make things more complex? – Piyush-Ask Any Difference May 27 '15 at 06:57
  • @Okazari yes we can use just
    if we don't need filter input here.
     – Valery Bugakov May 27 '15 at 06:57
  • @Sandeep You should produce your own filter in case of really complex filters (ex : null become "N/A", 1 become '1A', 2 become '2A'). For a simple text filter on a array, use the built in angularjs filters (the ng-repeat here). the "queryTitle" var can be intiliazed anywere you want. (Or coul be static as skymk said) – Okazari May 27 '15 at 07:16