Paginate By Week - AngularJS

Question

Я пытаюсь разбивать список событий (используя ng-repeat) на неделю в AngularJS. У меня есть настраиваемый фильтр, который отображает только события на текущей неделе, но я пытаюсь добавить функциональность, чтобы смотреть на будущее и прошлые недели.

Вот фильтр я использую для списков событий -

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

Я попытался с помощью нг щелчок, чтобы вызвать функцию, которая использует moment.js для .Добавьте (7, «дни»); к переменным 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')); 
}; 

(момент.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

Answer 2

weekStart и WeekEnd переменные не существуют вне сферы недели (пункт). Если вы используете ngClick для вызова функции, которая пытается изменить эти переменные, она просто вернется не определена. Я не знаю, как ваш макет, но я бы вытащил эти две переменные за пределами функции недели и сделал их переменными $ scope.

Кроме того, у меня будет функция ngClick, которая изменит две переменные переменной $ (либо добавит 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>