Angular ng-repeat filter on subarray

Question

Using Angular, I'm trying to filter using ng-repeat on FactorName given the following schema.
Filtering using <... ng-model="query.Factors.FactorName" ...> doesn't work (not surprisingly). I haven't seen literature on anyone trying to filter in this way.

Does Angular support filtering based on a subarray element property ?

[
   {
      "Name":"1",
      "Factors":[
         {
            "FactorName":"FactorOne",
            "Type":"SomeType"
         },
         {
            "FactorName":"FactorTwo",
            "Type":"SomeType"
         }
      ]
   },
   {
      "Name":"2",
      "Factors":[
         {
            "FactorName":"FactorThree",
            "Type":"SomeType"
         },
         {
            "FactorName":"FactorFour",
            "Type":"SomeType"
         }
      ]
   }
]

What have you tried? What do you mean by filtering on factor name? If you follow the [phonecat sample](https://docs.angularjs.org/tutorial/step_03) it should work, but the filter is generic. You could write your own filter easy enough. — Jason Goemaat, Jul 24 '14 at 18:35
possible duplicate of [Angular filter on child property](http://stackoverflow.com/questions/20579177/angular-filter-on-child-property) — null, Jul 24 '14 at 19:18

score 1 · Accepted Answer · answered Jul 25 '14 at 03:11

There is also another place where you can iterate on a array, working along side ng-repeat, in the double bindings with a custom filter.

Working Demo

HTML

<ul ng-repeat="x in factorData">
  <li>
    {{ x.Factors | factorFilter }}
  </li>
</ul>

JS

app.filter('factorFilter', function() {
    return function(items) {
        var results = [];
        if (items) {
            for (var i = 0; i < items.length; i++) {
                results = items[i]['FactorName'];
            }
            return results;
        } else {
          return 'Doh!';
        }
   }
})

Awesome! For anyone else trying to find a solution, the following slight modification works nicely: The search box: `input( type="text" ng-model="factorFilter" )` Data presentation: `div(ng-repeat="c in data | filter:factorFilter ")` — CodeOcelot, Jul 25 '14 at 23:08

score 0 · Answer 2 · answered Jul 24 '14 at 21:39

I figured it out to make the filter on any of the elements of the array Factors, but could not figure how to select just one field of the array. Maybe it just works for you:

<input ng-model="filtervalue.Factors"/><br/><br/>
Filtered:
<p><span ng-repeat="d in data | filter:filtervalue:false">{{d}}</span></p>

And the initialization on JS:

$scope.filtervalue = {};

Sample on jsfiddle:

http://jsfiddle.net/jordiburgos/QFUu6/

Angular ng-repeat filter on subarray

2 Answers2

Linked