AngularJsのフィルタ引数として可変値を渡す

Question

AngularJsのフィルタ引数として変数値を渡すことはできますか？

投稿があるとします。投稿ごとにタグIDの配列があります。 私はallTagsコレクション（id、label）を持っていて、投稿の後にタグラベルを表示したい。

<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：が、それはフィルタに変数値（私の場合は、配列）を渡すことですか？

Answer 1

フィルタ

Yesに変数値（私の場合は配列）を通過することが可能です。フィルタ機能で使用される各引数について：私はあなたの答えを入れているコードを共有filter docs

Answer 2

post.tagIdsは数字/ 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; 
}; 
}); 

HTMLで

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

Answer 3

：

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

は、HTML

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

文献で引数を表すために:を使用しています。あなたが提供されたデータサンプルのため

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' 
    }]; 
}); 

フィルタ：

<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> 

サンプルタグ・サービス：

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'}] 
    } 
}); 

サンプルコントローラ

HTML（完全なデモのplunkrを参照してください）：

サンプルとして共有しているjsonは、ダイナミックキーを使用して値を表示する（誰かが私が確信している方法を見つけることができる）の上にng-repeatを超える制限がありましたが、実際にはjsonをより良い構造プランナーで使用されています。それが役に立てば幸い。