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

问：是否可以将变量值（在我的情况下为数组）传递给过滤器？

Answer 1

是否可以将变量值（在我的情况下是一个数组）传递给过滤器

是。对于过滤函数中使用的每个参数：

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

您使用:来表示html中的参数

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

参考：filter docs

Answer 2

我假设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; }; });是一个数字/ ids数组。

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

在html中

{{1}}

Answer 3

分享我为你的答案提供的代码。（有关完整演示，请参阅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中使用。希望它有所帮助。

在AngularJs中将变量值作为过滤器参数传递

3 个答案: