AngularJS nested ng-repeat filter multiple parameters

Question

long time lurker, first time poster. Really love the community you have over here :)

Ok right to the problem. The goal is filtering the ng-repeat by passing 2 arguments to the filter.

I have a nested ng-repeat and on the second repeat i need to filter the entries depending on whether their lifespan in in the current month or not.

I have done this before with ng-if, but since i use different CSS for odd and even rows, that produced unwanted results.

the relevant HTML part:

<div class="col-md-12" ng-repeat="month in monthTable">
 <div class="col-md-12">
  <h2>
   <span>{{ month.start | amDateFormat:"MMMM" | uppercase}}</span>
  </h2>
 </div>
 <div class="col-md-12">
  <div ng-class-even="'calendar_row_even'" ng-class-odd="'calendar_row_odd'"
ng-repeat="bed in syncData.beds | filter: filterListItems(month, bed) |
orderBy:'timeFrom'">
   // --> displays the unfiltered results for each month at the moment...
  </div>
 </div>
</div>

The monthTable is used to determine the start and endpoints of a month + to generate names is appropriate locale, it's filled like this:

for ( var i = 0; i < 12; i++) {
  $scope.monthTable.push({
    start: new Date(Date.UTC($scope.currentYear, i, 1)).getTime(),
    end: new Date(Date.UTC($scope.currentYear, i+1, 1)).getTime()
  })
};

Pretty self-explanatory so far.

Now here is the function that "should do" the filtering:

$scope.filterListItems = function (month, bed) {
  console.log(month);
  console.log(bed);
  return true;
  /*return (bed.timeFrom < month.end && bed.timeUntil >= month.start);
--> this should be the code.*/
};

The problem is i can't get the filter to recieve 2 arguments. If i write is this way:

"filter: filterListItems(month, bed)"

the month gets passed on, but the bed is undefined

If i write it this way:

"filter: filterListItems:month:bed"

only the bed gets passed on, but the month is undefined

I have no idea what i'm doing wrong, would really appreciate it if any1 can point me in the right direction.

chalasr · Accepted Answer · 2016-02-11 10:10:50Z

1

You should declare your method as filter :

angular.module('yourApp')
    .filter('filterListItems', filterListItems);

And adapt your method like follows :

function filterListItems() {
    return function(items, month) {
        // 'items' represent the objects listed by your ng-repeat
        // Now, filter the items to return only items that respect your condition.
        return items.filter(function(item) {
            return (item.timeFrom < month.end && item.timeUntil >= month.start);
        });
    }
}

And use it like :

ng-repeat="bed in syncData.beds | filterListItems:month

answered Feb 11, 2016 at 10:10

chalasr

13.2k5 gold badges45 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS nested ng-repeat filter multiple parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related