我是 angularjs 世界的新手,我正在尝试做一些我认为应该可以通过指令实现的事情。
我有一个模板,其中包含使用 ng-repeat 列出的文章列表。这些文章有一个日期。我想在模板中按日期对文章进行分组。因此,我正在考虑创建一个指令,该指令将在当天的每组文章之前附加一个新的 div。模型中的数据已经按日期降序排序。
我应该使用指令中的编译函数来执行此操作吗?任何代码示例都会很棒。
我是 angularjs 世界的新手,我正在尝试做一些我认为应该可以通过指令实现的事情。
我有一个模板,其中包含使用 ng-repeat 列出的文章列表。这些文章有一个日期。我想在模板中按日期对文章进行分组。因此,我正在考虑创建一个指令,该指令将在当天的每组文章之前附加一个新的 div。模型中的数据已经按日期降序排序。
我应该使用指令中的编译函数来执行此操作吗?任何代码示例都会很棒。
如果我理解正确,您希望输出类似于:
<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>
<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>
以上是模仿我现有的小提琴。
以上假设(如您所述)文章已经排序。如果没有,小提琴将展示如何在控制器中使用 orderByFilter 来创建基于任何对象属性的排序数组。