2

我正在尝试在 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

4

2 回答 2

1

The weekStart and weekEnd variables don't exist outside of the scope of week(item). If you're using ngClick to call a function that tries to modify those variables, it'll just return undefined. I don't know how your layout is but I would pull those two variables outside of the week function and make them $scope variables.

Additionally, I would have ngClick call a function that would change the two $scope variables (either adds 7 or subtracts 7 depending on which direction you want to go in).

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

And create two buttons in your view:

<a href="#" ng-click="update(-7)">Previous week</a>
<a href="#" ng-click="update(7)">Next week</a>
于 2014-11-11T18:42:43.677 回答
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);
};

（你也很可能想要元素而ng-repeat不是liul）

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

于 2014-11-11T19:39:53.603 回答