Paginate By Week - 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，＆＃39; days＆＃39;）;到weekStart和weekEnd变量，但似乎无法使它工作。

任何帮助都将不胜感激。

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

Answer 1

weekStart和weekEnd变量不存在于week（item）范围之外。如果您正在使用ngClick来调用试图修改这些变量的函数，那么它只会返回undefined。我不知道你的布局是怎样的，但我会将这两个变量拉到周函数之外，并使它们成为$ 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>

Answer 2

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);
};

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

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