根據父級ng-repeat過濾ng-repeat

Question

現在crat頭兩個小時。 也許我累了，或者我不明白自己在做什么。 無論如何，我有很多博客文章。 看起來像這樣：

[
  {
    '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' }
    ]
  }
]

還有一個包含我的標簽的數組。

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

而且我正在像這樣進行常規的角度ng-repeat，以顯示所有博客文章標簽：

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

現在，我想添加一個嵌套的轉發器，該轉發器僅顯示來自包含當前標記的變量blog.posts博客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>

但是我似乎無法正常工作。 我認為應該很容易。 因為在我看來，這是一個非常簡單的任務。 根據字符串和數組過濾掉不需要的結果。

想要/期望的輸出：

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

Answer 1

您可以制作自定義過濾器，而不使用“ 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;
    }
});

接着

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

Answer 2

使用內置功能，您可以這樣進行：

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

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

過濾器的文檔在這里： https : //docs.angularjs.org/api/ng/filter/filter

或者，如果您希望標簽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>