Angularjs – ng-repeat :filter by single field

angularjsangularjs-filterng-repeat

I have an array of products that I'm repeating over using ng-repeat and am using

<div ng-repeat="product in products | filter:by_colour">

to filter these products by colour. The filter is working but if the product name / description etc contains the colour then the product remains after the filter is applied.

How do I set the filter to only apply to the colour field of my array rather than every field?

Best Answer

Specify the property (i.e. colour) where you want the filter to be applied:

<div ng-repeat="product in products | filter:{ colour: by_colour }">

Related Solutions

Javascript – Angular.js ng-repeat across multiple tr’s

Using ng-repeat on tbody appears to be valid see this post.

Also a quick test through an html validator allowed multiple tbody elements in the same table.

Update: As of at least Angular 1.2 there is an ng-repeat-start and ng-repeat-end to allow repeating a series of elements. See the documentation for more information and thanks to @Onite for the comment!

Javascript – How to display length of filtered ng-repeat data

For Angular 1.3+ (credits to @Tom)

Use an alias expression (Docs: Angular 1.3.0: ngRepeat, scroll down to the Arguments section):

<div ng-repeat="person in data | filter:query as filtered">
</div>

For Angular prior to 1.3

Assign the results to a new variable (e.g. filtered) and access it:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

Display the number of results:

Showing {{filtered.length}} Persons

Fiddle a similar example. Credits go to Pawel Kozlowski

Best Answer

Related Solutions

Javascript – Angular.js ng-repeat across multiple tr’s

Javascript – How to display length of filtered ng-repeat data

Related Topic