Question

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

xml-crypto

目前我在做：

Due Today
  Task 1
  Task 2

Due this week
  Task 3
  Task 4
  Task 5

General
  All remaining tasks would go here

我想最让我困惑的部分是如何计算出团队的时间框架。

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中的时间戳进行分组

1 个答案: