Angular ng-repeat filter on subarray

2020-04-18 06:52发布

问题:

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

回答1:

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!';
        }
   }
})    


回答2:

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/