How To Create A Composite Filter With Two Way Binding?

I want to display a list of items in a table and allow users to filter the items using form controls. My Problem I am able to accomplish this when the controller first executes, bu

Solution 1:

angular can automatically two-way-bind everything for you without the need for filters:

JS:

$scope.filteredRecords = function() {
  return$scope.records.filter(function(record, i) {
    return record.travelerCount === $scope.travelerFilter &&
      record.group === $scope.groupFilter;
  });
}

HTML:

<tr ng-repeat="record in filteredRecords()">

See here for a live example: http://plnkr.co/edit/aeBv2soGG06Trpp9WI4f?p=preview

Solution 2:

You can specify the filter as part of the ng-repeat, i.e.:

<tr ng-repeat="record in records | filter:{group:groupFilter} | filter:{travelerCount:travelerFilter}">

See here for a live version: http://plnkr.co/edit/1UcGDpwUAbtvEhUyCFss?p=preview