Question

我有一些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

Answer 1

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

演示：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

Answer 2

这样的事情：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;
  };
})

希望有所帮助。

有条件地在Angularjs中添加表元素

2 个答案: