Pass a variable value as filter argument in AngularJs

Question

Is it possible to pass a variable value as filter argument in AngularJs?

Suppose I have some posts, each post have a array of tag id's. I have allTags collection (id, label) and I want to display tag labels after the post.

<ul ng-repeat="post in posts">
    {{post.title}}
    {{post.body}}
<li ng-repeat="allTags|myFilter:post.tagIds">

allTags: [{5:'tagfive'}, {1:'one'}, {3:'myTag'}]
posts[0]: {title:'my post', tagIds:[3,5], body:' post body'}

Q: Is it possible to pass a variable value (in my case an array) to a filter?

Answer 1

Is it possible to pass a variable value (in my case an array) to a filter

Yes. For each argument used in the filter function:

app.filter(function(){
   return function(array, param1, param2){
        return .... // filter logic
   })
});

You use : to denote arguments in html

<li ng-repeat="allTags|myFilter:post.tagIds :scopeProp1: scopeProp2">

Ref: filter docs

Answer 2

I am supposing that post.tagIds is an array of numbers/ids.

app.filter('myFilter', function() {
return function(collection, arr){
  console.log(collection, arr);
  var ans = collection.filter(function(tag){
    console.log('keys', (+Object.keys(tag)[0]), arr);
     return (+Object.keys(tag)[0]) in arr;
 });
  console.log('Ans:', ans);
  return ans;
 }; 
});

In html

<li ng-repeat="tag in allTags| myFilter :post.tagIds">
     <p>{{tag}}</p>
</li>

Answer 3

Sharing the code I have put for your answer. (see the plunkr for complete demo)

HTML:

<ul ng-repeat="post in posts">
    {{post.title}}
    {{post.body}}
    <li ng-repeat="(key,val) in allTags|tagsFilter:post.tagIds">{{val}}</li>
</ul>

<h4>Improved tags structure</h4>
<ul ng-repeat="post in posts" class="improved-post">
    <h4>{{post.title}}</h4>
    <p>{{post.body}}</p>
    <li class="tag" ng-repeat="tag in allTagsImproved|tagsFilterImproved:post.tagIds">{{tag.tag}}</li>
</ul>

Sample tags Service:

app.factory("tagsService",function(){
  return {
    allTagsImproved:[{id:5,tag:'tagfive'}, {id: 1,tag:'one'}, {id:3,tag:'myTag'}, {id: 4,tag: 'cool tag'}, {id:7,tag:'EPIC Tag'}],
    allTags : [{5:'tagfive'}, {1:'one'}, {3:'myTag'}, {4:'cool tag'}, {7:'EPIC Tag'}]
  }
});

Sample controller:

app.controller('MainCtrl', function($scope, tagsService) {
  $scope.name = 'World';
  $scope.data = [{
    name:""
  },{
    name:"ahsan"
  },{
    name:""
  },{
    name:"mohsin"
  }];

  $scope.allTags = tagsService.allTags;
  $scope.allTagsImproved = tagsService.allTagsImproved;
  $scope.posts = [{
    title:'my post', 
    tagIds:[3,5], 
    body:' post body'
  },{
    title:'John\'s post', 
    tagIds:[1,4,7], 
    body:'John\'s post body'
  }];
});

Filter for the data sample you provided:

app.filter("tagsFilter",function(){
  return function(allTags,tagIds){
    console.log(tagIds)
    var filteredValues = [];
    for(var index in tagIds){
      for(var ind in allTags){
        if(allTags[ind].hasOwnProperty(tagIds[index].toString())){
          filteredValues.push(allTags[ind]);
        }
      }
    }
    return filteredValues;
  }
});

The json you've shared as sample had a limitation over ng-repeat over showing the value using dynamic keys (someone can find a way around I'm sure) but I would actually improve the json to a better structure as used in the plunkr. Hope it helps.