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

【问题标题】：Conditionally add table elements in Angularjs在Angularjs中有条件地添加表格元素
【发布时间】：2013-04-16 16:42:51
【问题描述】：

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

有没有一种简单的方法可以用 Angular 来完成，还是应该用 jquery 来完成？

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

Mon 12 June
Super Event

Tue 13 June
Another Event
Something Else

【问题讨论】：

它们按日期排列吗？
是的，json 是按日期排序的
感谢您的回答，但都不是我想要的，我更新了问题以使其更清晰
我的解决方案为每个日期创建一个包含事件列表的表格。我继续并添加了一个表格标题，以便您可以看到该事件。 jsfiddle.net/lucuma/DQ8PK

标签： javascript angularjs

【解决方案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

【讨论】：

【解决方案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;
  };
})

希望对您有所帮助。

【讨论】：