ng-repeat :filter by single field
AngularjsNg RepeatAngularjs FilterAngularjs Problem Overview
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?
Angularjs Solutions
Solution 1 - Angularjs
Specify the property (i.e. colour
) where you want the filter to be applied:
<div ng-repeat="product in products | filter:{ colour: by_colour }">
Solution 2 - Angularjs
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">
Solution 3 - Angularjs
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.
Solution 4 - Angularjs
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 } }">
Solution 5 - Angularjs
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.
Solution 6 - Angularjs
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".
Solution 7 - Angularjs
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}}
Solution 8 - Angularjs
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>
Solution 9 - Angularjs
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>
Solution 10 - Angularjs
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.
Solution 11 - Angularjs
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}">
Solution 12 - Angularjs
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