CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-filter
Tim Webster
Tim Webster

Reputation: 9196

ng-repeat :filter by single field

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?

Upvotes: 501

Views: 875390

Answers (12)

milad dn
milad dn

Reputation: 43

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

Upvotes: 0

Mark Rajcok
Mark Rajcok

Reputation: 364727

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

Upvotes: 490

CyberNinja
CyberNinja

Reputation: 864

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

Upvotes: 24

Neeraj Bansal
Neeraj Bansal

Reputation: 2826

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

Upvotes: 1

amit banerjee
amit banerjee

Reputation: 61

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.

Upvotes: 4

Phil
Phil

Reputation: 1089

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>

Upvotes: 10

Asad Ali Khan
Asad Ali Khan

Reputation: 307

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>

Upvotes: 7

Khader M A
Khader M A

Reputation: 6351

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.

Upvotes: 108

Petr B.
Petr B.

Reputation: 891

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

Upvotes: 66

David Hansen
David Hansen

Reputation: 3227

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

Upvotes: 108

Ben Lesh
Ben Lesh

Reputation: 108501

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.

Upvotes: 177

bmleite
bmleite

Reputation: 26880

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

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

Upvotes: 590

Related Questions