Question

我是angularjs世界的新手，我正在努力做一些我认为应该通过指令可以实现的事情。

我有一个模板，其中包含使用ng-repeat列出的文章列表。这些文章有一个日期。我想在模板中按日期对文章进行分组。所以我正在考虑创建一个指令，在当天的每组文章之前添加一个新的div。模型中的数据已按日期desc排序。

我是否应该在指令中使用编译功能来执行此操作？任何代码示例都会很棒。

Answer 1

如果我理解正确，您希望输出类似于：

<ul>
    <li>
         Show 3 articles for date 2012-12-07
    </li>
    <li>
         Show 1 articles for date 2012-12-06
    </li>
    <li>
         Show 2 articles for date 2012-12-05
    </li>
</ul>

在这种情况下，我会在呈现之前进行分组：

function ArticlesController ($scope) {
    var groupArticles = function (articles) {
        var i,
            art = {};

        for (i = 0; i < articles.length; i += 1) {
            if (!art.hasOwnProperty(articles[i].date)) {
                art[articles[i].date] = [];
            }

            art[articles[i].date].push(articles[i]);
        }

        return art;
    };
    $scope.articles = [{ date: '2012-12-07', title: 'Marcus' },
                       { date: '2012-12-07', title: 'Zero' },
                       { date: '2012-12-06', title: 'Moxxi' },
                       { date: '2012-12-05', title: 'Dr Zed' }];

    $scope.groupedArticles = groupArticles($scope.articles);
}

你认为：

<ul data-ng-controller="ArticlesController">
    <li data-ng-repeat="articles in groupedArticles">
        <div data-ng-repeat="article in articles">
            {{ articles.title }}
        </div>
    </li>
</ul>

Answer 2

<ul>
  <li ng-repeat="article in articles">
     <ng-switch on="$first || article.date != articles[$index-1].date">
        <div ng-switch-when="true" class="group_heading">{{article.date}}</div>
     </ng-switch>
     {{article.title}}
  </li>
</ul>

以上是我existing fiddle的模仿以上假设（正如您所说）文章已经排序。如果没有，那么这个小提琴就会展示如何在控制器中使用orderByFilter来创建一个基于任何对象属性的有序数组。

Angularjs指令附加到模板

2 个答案: