Reputation: 9196
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
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
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
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
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
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
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
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
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
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
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
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
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