按周分页 - AngularJS

Question

我正在尝试在 AngularJS 中按周对事件列表进行分页（使用 ng-repeat）。我有一个自定义过滤器，它只显示本周内的事件，但我正在尝试添加功能来查看未来和过去几周。

这是我用于事件列表的过滤器 -

$scope.week = function(item) {
    var weekStart = moment().startOf('week');
    var weekEnd = moment().endOf('week');
    var eventTime = moment(item.jsdatetime);
        if (eventTime >= weekStart && eventTime <= weekEnd) return true; 
            return false;
};

我尝试使用 ng-click 调用一个使用 moment.js 的函数来 .add(7, 'days');到 weekStart 和 weekEnd 变量，但似乎无法让它工作。

任何帮助将不胜感激。

这是一个具有基本功能的 CodePen - http://codepen.io/drewbietron/pen/xbKNdK

Answer 1

moment() 始终返回当前日期/时间。

您需要将对它的引用存储到一个变量中，然后将其用于操作。
（因为你有其他变量取决于它，我会创建一个函数来一次设置所有这些变量）

所以在控制器中我将顶部更改为

var currentDate,
    weekStart,
    weekEnd,
    shortWeekFormat = 'MMMM Do';

function setCurrentDate(aMoment){
  currentDate = aMoment,
  weekStart = currentDate.clone().startOf('week'),
  weekEnd = currentDate.clone().endOf('week')
}

// initialize with current date
setCurrentDate(moment());

// use these methods for displaying 
$scope.currentWeek = function(){ return currentDate.format(shortWeekFormat); }; 
$scope.currentWeekStart = function(){ return weekStart.format(shortWeekFormat); };
$scope.currentWeekEnd = function(){ return weekEnd.format(shortWeekFormat); };

然后为下一周/上一周创建两个方法

$scope.nextWeek = function(){
  setCurrentDate(currentDate.add(7,'days'));
};
$scope.prevWeek = function(){
  setCurrentDate(currentDate.subtract(7,'days'));
};

（moment.js 实现了valueOf，因此您可以进行直接比较）
最后更改您的周过滤器以实际比较日期（使用 .isSame()、.isBefore() 和 .isAfter()）而不是时刻对象（这是错误的，因为您无法对自定义对象进行直接比较）

$scope.week = function(item) {
    var eventTime = moment(item.jsdatetime);

    if ((eventTime.isSame(weekStart) || eventTime.isAfter(weekStart))&& 
        (eventTime.isSame(weekEnd) || eventTime.isBefore(weekEnd))) return true; 

    return false;
};

$scope.week = function(item) {
    var eventTime = moment(item.jsdatetime);

    return (eventTime >= weekStart && eventTime <= weekEnd);
};

（您也很可能希望li 元素上的ng-repeat 而不是ul）

演示地址 http://codepen.io/gpetrioli/pen/QwLRQB

Answer 2

weekStart 和 weekEnd 变量不存在于 week(item) 的范围之外。如果您使用 ngClick 调用试图修改这些变量的函数，它只会返回 undefined。我不知道您的布局如何，但我会将这两个变量拉到 week 函数之外并使其成为 $scope 变量。

另外，我会让 ngClick 调用一个函数来更改两个 $scope 变量（根据您想要进入的方向，加 7 或减 7）。

$scope.weekStart = moment().startOf('week');
$scope.weekEnd = moment().endOf('week');

$scope.week = function(item) {
    var eventTime = moment(item.jsdatetime);
    if (eventTime >= $scope.weekStart && eventTime <= $scope.weekEnd) return true; 
      return false;
    };

$scope.update= function(direction) {
    $scope.weekStart.add(direction, 'days');
    $scope.weekEnd.add(direction, 'days');
}

并在您的视图中创建两个按钮：

<a href="#" ng-click="update(-7)">Previous week</a>
<a href="#" ng-click="update(7)">Next week</a>