ng-repeat :filter by single field

Question

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?

Custom filters are also powerful =), you might like it, example: http://noypi-linux.blogspot.com/2014/07/angularjs-filter-creating-custom-filter.html — sss, Jul 22 '14 at 03:04
Different solution: https://stackoverflow.com/a/24992197/257470 — andrew.fox, Sep 01 '17 at 10:03

score 589 · Answer 1 · answered Feb 06 '13 at 16:01

589

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

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

answered Feb 06 '13 at 16:01

bmleite

26,850
4
71
46

5

what if i want ! by_colour as filter:{ colour: ! by_colour }" – rjdmello Jul 10 '14 at 07:47
29

@rjdmello just prepend `'!'+`, like this `
`
– bmleite Jul 10 '14 at 18:07
3

Not sure if I understood it correctly, but the first thing that came to my mind was: `
` **or** (something equivalent) like this: `
` and on the controller: `$scope.by = { 'resultsMap.annie': '!!' };`. This second approach gives you more control over the property being filtered. Note: `'!!'` means "not null".
– bmleite Jul 14 '14 at 09:51
How could i do this dynamically? for example something like `
` where `customFilter = '{ colour: by_colour }'` and then that customFilter would be able to change dynamically.
– Federico Sep 04 '14 at 22:34
2

@Federico, the `customFilter` can be a simple object on your `scope` that you update whenever needed. Check this [plunker](http://plnkr.co/edit/uP6tDh7wnGSSNYlkOyL5?p=preview). – bmleite Sep 05 '14 at 00:22
Yeah, found that out a bit after posting. I was trying to do it inline with the html something like ` – Federico Sep 06 '14 at 19:46
How can I use this type of filter for 2 or more colors. Like if my array got 10 types of color I need to filter red and green at the same time using a check box.. Is there any way to do so. – nosdalg Mar 26 '15 at 11:35
1

This should be the accepted answer. It is the most succinct. Well, except that 'colour' has too many vowels. – Rap Aug 26 '15 at 15:03
I had to put single quotes around my filter field e.g.
– tfa Apr 05 '17 at 10:21

score 489 · Accepted Answer · edited Apr 13 '18 at 15:24

489

See the example on the filter page. Use an object, and set the color in the color property:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search">

edited Apr 13 '18 at 15:24

Mario Padilla

521
5
19

answered Feb 06 '13 at 15:58

Mark Rajcok

362,217
114
495
492

Thanks Mark, are there any benefits to doing it this way rather than the method suggested below? – Tim Webster Feb 06 '13 at 16:10
7

@Seglespaan, not really. You might find that the method presented by bmleite and blesh read nicer, since you can see that you are filtering by color. This method is more compact, which might be useful if you want to search by multiple properties, and you'd rather not have a long object in the HTML: `filter:{ color: '...', size: '...', ...}` – Mark Rajcok Feb 06 '13 at 16:21
2

@MarkRajcok, how would I be able to search by multiple properties, looking at the union, rather than intersection? – jetcom Dec 30 '13 at 23:53
2

@jetcom, you'll need a custom filter, see http://stackoverflow.com/a/13845135/215945 – Mark Rajcok Dec 31 '13 at 17:47
1

I don't know if the OP was asking how to make a search box as much as how to filter out values in an ng-repeat when they're repeating on page. The answer beneath this one seems most relevant to the question asked. – twknab Mar 11 '17 at 22:02

Ben Lesh · Answer 3 · 2013-02-07T05:02:40.303

177

You can filter by an object with a property matching the objects you have to filter on it:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

<div ng-repeat="product in products | filter: { color: 'red' }">

This can of course be passed in by variable, as Mark Rajcok suggested.

edited Feb 07 '13 at 05:02

answered Feb 06 '13 at 16:00

Ben Lesh

107,825
47
247
232

2

lets say that i have this kind of scope.products: { id: 1, name: 'test', color: 'lightblue' }, { id: 2, name: 'bob', color: [{foreground : black, background:white}] }. then how can i filter product based on color:background to get white value? – Gery Apr 25 '14 at 09:01
2

@Gery: Honestly, I don't think you can. Either way, using filter: at all is sort of bad practice, IMO. In that it puts logic in your view that should really be in your controller, and isn't very testable. – Ben Lesh Apr 25 '14 at 18:26
This is a way to move the filtering to the controller and extend the model. http://www.ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html. – ozkary Jun 24 '15 at 22:14

David Hansen · Answer 4 · 2014-10-15T21:53:03.590

108

If you want to filter on a grandchild (or deeper) of the given object, you can continue to build out your object hierarchy. For example, if you want to filter on 'thing.properties.title', you can do the following:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

You can also filter on multiple properties of an object just by adding them to your filter object:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

edited Oct 15 '14 at 21:53

answered Oct 15 '14 at 21:46

David Hansen

2,857
2
21
19

2

is this like 'or' type or 'and' type of filter. – sms Jan 12 '15 at 06:43
1

Same question is that an AND or an OR when filtering more than one property? – lostintranslation Jan 22 '15 at 02:16
1

for OR filter only way is custom filter, I think – Dmitri Algazin May 28 '15 at 14:31

score 107 · Answer 5 · edited Mar 03 '16 at 09:45

107

Best way to do this is to use a function:

html

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

javascript

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

Alternatively, you can use ngHide or ngShow to dynamically show and hide elements based on a certain criteria.

edited Mar 03 '16 at 09:45

Mosh Feu

28,354
16
88
135

answered Jul 20 '15 at 06:45

Khader M A

5,423
3
19
19

1

Thank you, this is very useful when you have complex comparisons – Dobin Oct 19 '20 at 08:07
Using `ng-hide` was perfect and exactly what I needed. – Akaisteph7 Mar 08 '23 at 16:09

score 66 · Answer 6 · edited Mar 03 '16 at 09:44

66

Be careful with angular filter. If you want select specific value in field, you can't use filter.

Example:

javascript

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

html

<div ng-repeat="product in products | filter: { color: 'blue' }">

This will select both, because use something like substr
That means you want select product where "color" contains string "blue" and not where "color" is "blue".

edited Mar 03 '16 at 09:44

Mosh Feu

28,354
16
88
135

answered May 02 '13 at 07:22

Petr B.

879
1
8
17

89

`
` will work on only exact matches (the 'true' at the end is the comparator argument: [link](http://docs.angularjs.org/api/ng.filter:filter)
– Mark Aug 23 '13 at 09:54

score 23 · Answer 7 · edited Mar 21 '18 at 23:59

23

Search by color:

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

you can do an inner nest too.

filter:{prop1:{innerprop1:searchinput}}

edited Mar 21 '18 at 23:59

Paul Rooney

20,879
9
40
61

answered May 01 '17 at 18:19

CyberNinja

872
9
25

Phil · Answer 8 · 2016-09-29T09:22:19.097

If you were to do the following:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

...you would not only get items of itemTypeId 2 and itemStatus 1, but you would also get items with itemType 20, 22, 202, 123 and itemStatus 10, 11, 101, 123. This is because the filter: {...} syntax works like a string contains query.

However, if you were to add the : true condition, it would do filter by exact match:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

Asad Ali Khan · Answer 9 · 2016-04-11T11:05:38.007

7

my way is this

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

sub is a Input field or whatever you like

Displaying like this

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>

edited Apr 11 '16 at 11:05

answered Apr 11 '16 at 10:46

Asad Ali Khan

307
4
16

In general using ng-if is a clean solution – Kilizo Jan 30 '17 at 16:10

score 4 · Answer 10 · edited Mar 17 '17 at 20:25

4

You must use filter:{color_name:by_colour} instead of

filter:by_colour

If you want to match with a single property of an object, then write that property instead of object, otherwise some other property will get match.

edited Mar 17 '17 at 20:25

Gonzalo.-

12,512
5
50
82

answered Mar 17 '17 at 20:12

amit banerjee

61
4

score 1 · Answer 11 · answered Feb 13 '18 at 06:57

Specify the property in filter, of object on which you want to apply filter:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

But you want to apply filter only on firstname

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">

score 0 · Answer 12 · answered Jul 20 '18 at 11:08

If you want filter for one field:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

If you want filter for all field:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

and https://docs.angularjs.org/api/ng/filter/filter good for you

ng-repeat :filter by single field

12 Answers12

Linked

Related