根据父ng-repeat过滤ng-repeat

Scratching my head now for 2 hours. Maybe I'm tired or maybe I don't understand what I'm doing. Anyway, I've got an array of blogposts. Which looks like this:

现在抓我的头2个小时。也许我累了,或者我不明白我在做什么。无论如何,我有一系列的博客文章。看起来像这样:

[
  {
    'title': 'first post', 
    'tags': [
      { 'name': 'Tag 1', 'slug': 'tag-1' }
    ]
  },
  {
    'title': 'second post', 
    'tags': [
      { 'name': 'Tag 1', 'slug': 'tag-1' },
      { 'name': 'Tag 3', 'slug': 'tag-3' }
    ]
  },
  {
    'title': 'third post', 
    'tags': [
      { 'name': 'Tag 2', 'slug': 'tag-2' }
    ]
  }
]

And also an array containing my tags like this.

还有一个包含我这样的标签的数组。

[
  {'title': 'Tag 1', 'slug':'tag-1'},
  {'title': 'Tag 2', 'slug':'tag-2'},
  {'title': 'Tag 3', 'slug':'tag-3'},
  {'title': 'Tag 4', 'slug':'tag-4'}
]

And I am doing an regular angular ng-repeat like this to show all my blogpost tags:

我正在做一个像这样的常规角度重复,以显示我的所有blogpost标签:

<ul>
    <li ng-repeat="tag in blog.tags">
        <h3>{{ tag.title }}</h3>
    </li>
</ul>

Now, I would like to add a nested repeater which only shows blogposts from the variable blog.posts that contains the current tag. Something like this:

现在,我想添加一个嵌套的转发器,它只显示包含当前标签的变量blog.posts中的博客帖子。像这样的东西:

<ul ng-controller="BlogComponent as blog">
  <li ng-repeat="tag in blog.tags">
    <h3>{{ tag.title }}</h3>
    <ul>
      <li ng-repeat="post in blog.posts | filter: tag.slug IN post.tags">
        <span>{{ post.title }}</span>
      </li>
    </ul>
  </li>
</ul>

But I cannot seem to get it working. I think it SHOULD be easy. Because in my mind it is a quite simple task. to filter out unwanted results based on a string and an array.

但我似乎无法让它发挥作用。我认为它应该很容易。因为在我看来这是一项非常简单的任务。根据字符串和数组过滤掉不需要的结果。

Wanted/Exptected output:

<ul>
  <li>
    <h3>Tag 1</h3>
    <ul>
      <li>first post</li>
      <li>second post</li>
    </ul>
  </li>
  <li>
    <h3>Tag 2</h3>
    <ul>
      <li>third post</li>
    </ul>
  </li>
  <li>
    <h3>Tag 3</h3>
    <ul>
      <li>second post</li>
    </ul>
  </li>
</ul>

2 个解决方案

#1

You could make a custom filter instead of using "filter: expression". What you can do create a filter that takes the tags and posts as arguments and returns the array with filtered items.

您可以创建自定义过滤器,而不是使用“filter:expression”。您可以创建一个过滤器,将标记和帖子作为参数,并返回带有过滤项的数组。

myApp.filter('myFilter', function () {
    return function (posts, tag) {
        var newPosts = [];
          for (var i = 0; i < posts.length; i++) 
            for (var j = 0; j < post.tags.length; j++) 
             if (posts[i].tags[j].slug === tag.slug)
                newPosts.push(posts[i]);

        return newPosts;
    }
});

And then

  <li ng-repeat="post in blog.posts | myFilter: tag">
    <span>{{ post.title }}</span>
  </li>

#2

Using the built-in functionality, you can do it like this:

使用内置功能,您可以这样做:

<ul ng-controller="BlogComponent as blog">
  <li ng-repeat="tag in blog.tags">
    <h3>{{ tag.title }}</h3>
    <ul>
      <li ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
        <span>{{ post.title }}</span>
      </li>
    </ul>
  </li>
</ul>

See it working here: https://plnkr.co/edit/pQZse1hUnnzyfneIlpMu?p=preview

看到它在这里工作:https://plnkr.co/edit/pQZse1hUnnzyfneIlpMu?p = preview

Documentation for the filter is here: https://docs.angularjs.org/api/ng/filter/filter

过滤器的文档在这里:https://docs.angularjs.org/api/ng/filter/filter

Or, if you want Tag 4 to be hidden because it has no matching posts, you could do something like this:

或者,如果您希望隐藏标记4,因为它没有匹配的帖子,您可以执行以下操作:

<div ng-controller="BlogComponent as blog">
  <div ng-repeat="tag in blog.tags">
    <div ng-repeat="post in blog.posts | filter: {tags: {slug: tag.slug}}">
      <h3 ng-if="$first">{{ tag.title }}</h3>
      <li>{{ post.title }}</li>
    </div>
  </div>
</div>

#1