Sslink Sslink - 21 days ago 6
AngularJS Question

Angular ng repeat filter inside ng repeat

I've been trying to make a list of geozones, with a select of taxes each (not all taxes apply to all geozones).

So I did a ng-repeat for the geozones, and inside each of them a ng-repeat with all taxes. Problem is I don't know how to send the id of the geozone being filtered at the moment. This is the code right now:

<md-option ng-repeat="tax in taxClasses | filter: filterTax" value="{{ '{{ tax.id }}' }}">{{ '{{ tax.name }}' }}</md-option>


and the JS:

$scope.filterTax = function(tax, n){

angular.forEach(tax.geoZone , function(geo){
if(geo === $scope.prices[n].geozoneId){
return true;
}
});
return false;
};


Need n to be the index of the geozone, or something of the sort. Thanks in advance!

Answer

Your idea is not that far off, but using filter: is not even necessary, as the pipe | is already a filter command:

ng-repeat="<var> in <array> | <filterFunction>:<...arguments>"

Thus you can create a filter (see https://docs.angularjs.org/guide/filter for details on that)

ng-repeat="tax in taxClasses | filterTax: <geozoneIndex>"

The value form the collection will be passed as the first argument of your filterTax function. Any further argument is passed separated by a colon :.

When you use this, you have to propagate a filter method like this:

app.module(...).filter('filterTax', function(/* injected services */) {
  return function (/* arguments */ input, geozoneIndex) {
    // function body
  }
});

Alternatively use a filter function from your scope:

// template
ng-repeat="tax in filterTaxes(taxClasses, <geozoneIndex>)"

// script
$scope.filterTaxes = function(taxClasses, geozoneIndex) {
  // do the whole filtering, but return an array of matches
  return taxClasses.filter(function(taxClass) {
    return /* in or out code */;
  });
};

This means your geozoneIndex may be either a fixed value or being pulled from a variable, that's available in that scope.

Just be aware that your filterTax function will be called a lot, so if your page is getting slow you might want to consider optimizing that filtering.