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?

回答1:

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

回答2:

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

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

回答3:

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.

回答4:

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

回答5:

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.

回答6:

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

回答7:

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

回答8:

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>

回答9:

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>

回答10:

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.

回答11:

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

回答12:

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