在 ng-repeat 中使用时间戳分组

Question

我有一堆任务想按截止日期分组，目前每个任务都有一个创建的时间戳，我想用它来组织元素。

Due Today
  Task 1
  Task 2

Due this week
  Task 3
  Task 4
  Task 5

General
  All remaining tasks would go here

目前我在做：

<ul>
  <li ng-repeat="task in tasks" class="list-item">
    <a>{{ task.name }}</a>
    <title title="{{ task.date.created | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}">{{ task.date.created | amCalendar }}</title>
  </li>
</ul>

我想最让我困惑的部分是如何制定小组的时间表。

Answer 1

您可以在控制器中创建一个 groups 数组并使用 filter 函数将任务过滤成组。

我用示例创建了 this fiddle。

javascript:

(function() {
    angular
        .module('TaskApp', ['angularMoment'])
        .controller('TaskController', TaskController);

    function TaskController($scope) {
        $scope.groups = [
            {
                name: "Due Today",
                value: {
                    from: 0,
                    to: 0
                }
            },
            {
                name: "Due this week",
                value: {
                    from: 1,
                    to: 7
                }
            },
            {
                name: "General",
                value: {
                    from: 8,
                    to: Infinity
                }
            },
            {
                name: "Late",
                value: {
                    from: -Infinity,
                    to: -1
                }
            }
        ];

        $scope.tasks = []; // your tasks array

        $scope.dueDate = function (dateTo) {
            return function(value) {
                var due = moment(value.date.due);
                var now = moment();
                var diff = due.diff(now, 'days');
                return diff >= dateTo.value.from && diff <= dateTo.value.to;
            };
        };
    }
})();

HTML:

<html ng-app="TaskApp">
<body ng-controller="TaskController">
<div class="panel panel-default" ng-repeat="group in groups">
  <div class="panel-heading">{{ group.name }}</div>
  <div class="panel-body">
    <ul class="list-group" >
        <li ng-repeat="task in tasks | filter: dueDate(group)" class="list-group-item">
            <a href="#">
                <h4 class="list-group-item-heading">
                    {{ task.name }}
                </h4>
                <p class="list-group-item-text">
                    Created: {{ task.date.created | amCalendar }}
                </p>
            </a>
        </li>
    </ul>
  </div>
</div>
</body>
</html>

在 ng-repeat 中使用时间戳分组

Grouping using timestamp in ng-repeat

angularjs

momentjs