Angularjs ng-repeat with conditions

Angularjs ng-repeat with conditions

本文关键字：conditions with ng-repeat Angularjs      更新时间：2023-09-26

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

当我做 ng-repeat="文章中的艺术"和 {{ art.article_title }} 时，它会打印标题 10 次，这不是我想要的。

我想做类似的事情

标题-1：第一条第二条第三条

标题-2：第四条第5条......

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

谢谢

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

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

（我没有测试它，只是临时编写它作为快速示例，如果您的文章未按标题排序，您将不得不修改它）

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

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>
相关文章：