javascript - Angularjs ng-repeat 有条件

Question

假设我有 10 个文章对象数组，每个对象都有自己的文章标题（假设其中一些具有相同的标题）

当我执行 ng-repeat="art in Articles" 和 {{ art.article_title }} 时，它会打印标题 10 次，这不是我想要的。

我想做类似的事情

Title-1: 第 1 条 第 2 条 第 3 条

Title-2：第 4 条第 5 条......

如果文章具有相同的标题，则类似的东西。

谢谢

Answer 1

您应该编写一个自定义过滤器，然后您将能够像这样继续：

<li ng-repeat="unique_article in articles|dedup">
    {{unique_article.article_title}}
    <span ng-repeat="related in unique_article.related">
        Article {{related.id}}
    </span>
</li>

您的过滤器可能看起来像这样（假设您的文章按标题排序）：

.filter('dedup', function() {
  return function(articles) {
    var deduped = [];
    var last_article = null;
    for(var i=0,max=articles.length;i<max;i++) {
        var article = articles[i];
        if(!last_article || last_article.article_title !== article.article_title)
        {
            article.related = [];
            deduped.push(article);
            last_article = article;
        } else {
            last_article.related.push(article);
        }
    }
    return deduped;
  };
});

（我没有测试它，只是临时写了一个简单的例子，如果你的文章没有按标题排序，你将不得不修改它）

Answer 2

也许重新考虑它会有所帮助，理想的方法是重新排列您的对象，以便文章属于标题，就像这样。

var arrangeArticles = function() {
    var result = {};
    angular.forEach($scope.articles, function( article ) {
       var title = article.article_title;
       if( !result[title] ) {
         result[title] = [article];
       } else {
         result[title].push(article);
       }
    });
    $scope.articles = result;
    $scope.$apply(); // Might be needed 
};

我不认为你可以ng-repeat用你表达的布局在 , 中做到这一点。

然后你需要把你的重复改成这样

<div ng-repeat="(title, group) in articles">
    {{title}}
    <div ng-repeat="article in group">
       {{article.description}}
    </div>
</div>