0

Sloved! see how below.

I'm trying to filter with angular both with custom function and input search.

My HTML look's like :

<md-list-item class="md-3-line" ng-repeat="guest in guestList | filter:filterGuests && searchInput" >
     <div class="md-list-item-text">
         <h3>{{guest.name}}</h3>
     </div>
 </md-list-item>

Where 'searchInput' is basic input tag and the function 'filterGuests' look's like:

$scope.filterGuests = function(guest){
    if($scope.$parent.filters[guest.status] == true)
        return true;
    return false;

The thing that I'm trying to do is after the 'filterGuest' actually filtered the most of the guest , to be able also to perform the search. How I can achieve the filter both with the function and the input?

Sloved! I'v achieve that by changing both the HTML and the controller. In HTML i'v change it to :

<md-list-item class="md-3-line" ng-repeat="guest in guestList | filterGuests:searchInput:this" >
     <div class="md-list-item-text">
         <h3>{{guest.name}}</h3>
     </div>
 </md-list-item>

and I modified the controller , I take out the filter to be as:

.filter('filterGuests',function($log){
    return function(guests,input,scope){
        var result = [];
        angular.forEach(guests,function(guest,key){
            if(scope.$parent.filters[guest.status] == true && guest.name.search(input) > -1)
                result.push(guest);
        });
        return result;

    };
});

The parameters are passed into the filter as:

function(guests,input,scope)

All the list of the items(guests in my case) , the input for the search and the $scope(I need to access a variables outside of the scope) .

All the answers i'v found here : https://stackoverflow.com/a/11997076/2346370

Thanks Bas Slagter , I have no idea how I didn't think of passing another argument.

Community
  • 1
  • 1
olsynt
  • 93
  • 1
  • 2
  • 9

1 Answers1

0

You can pass on the value of searchInput to your filterGuests filter to use it when filtering.

<md-list-item class="md-3-line" ng-repeat="guest in guestList | filterGuests:searchInput" >
     <div class="md-list-item-text">
         <h3>{{guest.name}}</h3>
     </div>
 </md-list-item>

I made a small example: http://jsfiddle.net/basslagter/p7czcssq/1/

Bas Slagter
  • 9,831
  • 7
  • 47
  • 78