Question

I am new to angularjs world and am trying to do something that I think should be achievable with a directive.

I have a template which has a list of articles listed using ng-repeat. These articles have a date on them. I want to group the articles by date in the template. So I am thinking of creating a directive that would append a new div before each group of articles in that day. The data in the model is already sorted by date desc.

Should I be using the compile function in the directive to do this ? Any code examples would be great.

Answer 1

If I understand you correctly you want the output to be something like:

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

In that case, I would do the grouping before it renders:

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

And you view:

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