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

===============>>#1 票数: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的值,如果它已经改变,有条件地做一些事情。 以下问题概述了该策略: 使用标题视图进行角度ng-repeat

===============>>#2 票数: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;
  };
})

希望有所帮助。

  ask by raphael_turtle translate from so

未解决问题?本站智能推荐:

1回复

AngularJS有条件地添加指令

我有一个可以编辑的表格。 我试图在用户单击按钮时设置Summernote插件。 例如,这是表单标题,当edit为true时应初始化summernote,而edit为false则销毁summernote。 如何使summernote指令有条件? 我尝试使用此指令,但是它不起作用。
1回复

如何有条件地向元素动态添加AngularJS指令?

所以我真的不能使它正常工作,我有以下代码 HTML: JavaScript的: 柱塞: http ://plnkr.co/edit/7cJKhIuNqnsk1CkczjoE?p=preview 如您所见,类在动态添加时不会触发指令,但在我上一个“静态”示例中可以正常工
2回复

有条件地添加HTML元素

我仅在检查条件之后才尝试将HTML元素添加到div中。 我尝试有条件地添加指令和附加元素,但我做不到。
1回复

如何在AngularJS中有条件地添加指令

您能告诉我如何在有角度的js中有条件地添加指令吗?实际上我是从JSON生成视图,我想将自定义指令添加到仅具有checkInput属性的某些字段。示例我将自定义指令命名为“ checkInput”将其添加到具有“ checkInput”属性为true的输入字段中 你能告诉我如何添加这个吗
2回复

Angularjs如何基于另一个列表中的repeat元素的存在来有条件地检查复选框

作为一个非常新的带有cshtml页面的angularjs用户,在模式窗口的页面加载期间,我试图检查一个重复的复选框,如果它存在于另一个列表中。 下面的代码是概念性的: 具体来说,如果在project.analysisTypes数组中找到了analysisType,我想勾选复选框。 我
3回复

有条件的数据显示隐藏在Angularjs中

我正在开发一个应用程序,我必须根据用户过滤器生成表格报告。 用户可以过滤结果并使用不同的参数提交新查询。 根据复选框和结果列表之一,我必须在表格中显示隐藏列。 我如何以Angular方式实现?
2回复

使用AngularJS中的路由有条件地渲染脚本

我是Angular的新手,我想知道如果ngRoute等于某个值,是否有任何方法可以呈现脚本(CSS / JS)。 例如,我定义了以下路由: 我想呈现<link href="css/app.css" rel="stylesheet">在头部时路径是"/"和<link h
2回复

有条件地在AngularJS中应用ngClass

使ngClass成为条件表达式的任何方法。 例如,我已经尝试使用javascript进行以下操作: 并查看: 使用ngClass应用此方法的最佳方法是什么?
1回复

有条件地订购-AngularJs

我一直试图做的是有条件地设置值,以便通过它们来排序ng-repeat值。 我试图做的是采用用于添加ng-class的条件方法,如下所示: 并将其与日期orderBy方法结合使用: 这将导致以下任一情况,但不幸的是,这些都不起作用。 如上所示,最近添加的字符串将从下拉
2回复

有条件地设置订单由Angularjs

我有一个用户数组,我想在首次加载时按姓氏顺序排列ng-repeat。 添加新用户后,请按日期顺序添加ng-repeat,然后再添加姓氏。 本质上,我希望最新的用户被推到ng-repeat的顶部。 在我的JS中... 基本上,此代码不执行任何操作。 我想我在HTML中缺少一步