Question

我需要显示带有＆＃34;标题＆＃34;的消息列表。其中只包含以下消息的日期，如下所示：

2014-12-24
Message 1
Message 2
Message 3
2014-12-21
Test 1
Test 2

等

我有跟随json：

[
    {
        created_at: "2014-12-24",
        message: "Message 1"
    },
    {
        created_at: "2014-12-24",
        message: "Message 2"
    },
    {
        created_at: "2014-12-24",
        message: "Message 3"
    },
    {
        created_at: "2014-12-21",
        message: "Test 1"
    },
    {
        created_at: "2014-12-21",
        message: "Test 2"
    },
]

如何在使用AngularJS的模板迭代期间执行此操作？

谢谢！

Answer 1

您可以使用https://lodash.com/docs#groupBy

var json = [
    {
        created_at: "2014-12-24",
        message: "Message 1"
    },
    {
        created_at: "2014-12-24",
        message: "Message 2"
    },
    {
        created_at: "2014-12-24",
        message: "Message 3"
    },
    {
        created_at: "2014-12-21",
        message: "Test 1"
    },
    {
        created_at: "2014-12-21",
        message: "Test 2"
    },
];

var data = _.groupBy(val, 'created_at');

它将按照created_at值对您的json数组进行分组。

Answer 2

只有当此值与前一个值不同时，才能显示created_at。

   <h3 ng-if="data[$index-1].created_at != item.created_at">
        {{item.created_at}}
   </h3>

您必须对数据进行排序。 E.g。

$scope.data = $filter('orderBy')($scope.data, 'created_at', true);

但是，你应该改进排序，因为'created_at'属性是字符串（不是日期）。

示例http://jsfiddle.net/t4z1joj5/

AngularJS在模板迭代期间设置变量

2 个答案: