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?

I added json examples, I just need to pass an array to a fiilter. That array is a property of a angular object. — serge
– serge, Commented Jun 23, 2016 at 0:22

charlietfl · Accepted Answer · 2016-06-23 00:48:57Z

4

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

edited Jun 23, 2016 at 0:48

answered Jun 23, 2016 at 0:43

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Zohaib Ijaz · Accepted Answer · 2016-06-23 01:29:43Z

0

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>

edited Jun 23, 2016 at 1:29

answered Jun 23, 2016 at 0:23

Zohaib Ijaz

23k7 gold badges42 silver badges63 bronze badges

2 Comments

Zohaib Ijaz Over a year ago

@Serge I updated my answer after seeing your question update and json data. I hope it will work otherwise let me know

serge Over a year ago

is it possible just to pass to my (custom)filter the "post.tagIds". I have a filter "myFilter" that takes as argument an array...

Muhammad Ahsan Ayaz · Accepted Answer · 2016-06-23 01:40:20Z

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.

Collectives™ on Stack Overflow

Pass a variable value as filter argument in AngularJs

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related