1

我有一些 json 要呈现在一个看起来像的表中；

[{"title":"Super Event","date":"Mon 12 June"},
 {"title":"Another Event","date":"Tue 13 June"},
 {"title":"Something Else","date":"Tue 13 June"}]

我想创建一个包含每一天事件的每个日期的表格，或者一个带有日期行后跟日期事件的表格。我最初在 jquery 中对此进行了编码，首先创建表，然后将事件附加到相应的日期表中。目前我只能显示每个事件的每个日期。

<table>
    <tr ng-repeat="event in events"><th>{{event.date}}</th>
    <td>{{event.title}}</td></tr>
  </table>

有没有一种简单的方法可以在角度上做到这一点，还是应该用 jquery 来完成？

编辑：我需要的表输出必须有一行或带有日期的标题，然后是事件名称的行，例如

Mon 12 June
Super Event

Tue 13 June
Another Event
Something Else
4

2 回答 2

2

有几种方法可以做到这一点。第一个是带过滤器的：

演示：http: //jsfiddle.net/lucuma/DQ8PK/

HTML：

<div ng-app ng-controller="Main">
    <table ng-repeat="event in eventsToFilter() | filter:filterDate">
        <tr><th>{{event.date}}</th></tr>
        <tr ng-repeat="e in events | filter: {date: event.date}">
            <td>{{e.title}} - {{e.date}}</td>
        </tr>
    </table>
</div>

JS：

function Main($scope) {

    $scope.events = [{
        "title": "Super Event",
        "date": "Mon 12 June"
    }, {
        "title": "Another Event",
        "date": "Tue 13 June"
    }, {
        "title": "Something Else",
        "date": "Tue 13 June"
    }];



    var filterDates = [];
    $scope.eventsToFilter = function () {
        filterDates = [];
        return $scope.events;
    }


    $scope.filterDate = function (event) {
        dateIsNew = filterDates.indexOf(event.date) == -1;
        if (dateIsNew) {
            filterDates.push(event.date);
        }
        return dateIsNew;
    }
}

第二个可以像下面这样检查 event.date 的值并在它发生变化时有条件地做一些事情。以下问题概述了该策略： Angular ng-repeat with header views

于 2013-04-16T17:05:36.757 回答
1

像这样的东西怎么样：http ://plnkr.co/edit/3DvokKEvZeHS9gDMectM?p=preview ？

我为 groupBy 创建了一个快速过滤器，它在传入的值上创建一个键：

ng-repeat="(date,list) in data | groupBy:'date'"

如果你愿意，你可以添加一个排序。

代码如下所示：

app.filter('groupBy', function(){
  return function(items,by) {
    var out = {};
    for (var i = 0 ; i < items.length ; i++) {
      var o = out[items[i][by]];
      if (!o) {
        out[items[i][by]] = o = [];
      }
      o.push(items[i])
    }
    return out;
  };
})

希望有帮助。

于 2013-04-16T17:05:15.377 回答