가변 인수를 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

에서

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

것이 가능 필터

예에 (제 경우 배열) 변수 값을 전달하는 것이다. 필터 기능에 사용되는 각 인수의 경우 : 나는 당신의 대답을 넣어 가지고 코드를 공유 filter docs

Answer 2

post.tagIds은 숫자/ID의 배열이라고 가정합니다. 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"> 

참고 문헌 인수를 표시하기 위해 :를 사용합니다. (완전한 데모에 대한 plunkr 참조)

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> 

샘플 태그 서비스 :

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

샘플 컨트롤러 : 사용자가 제공 한 데이터 샘플에 대한

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

필터 :

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

샘플로 공유 한 json은 동적 키를 사용하여 값을 표시하는 것보다 ng-repeat에 대한 제한이 있습니다 (누군가 내가 확실한 방법을 찾을 수 있음)하지만 실제로 json을 더 나은 구조로 개선 할 것입니다. plunkr에서 사용 된 것처럼. 희망이 도움이됩니다.