Question

＆＃34;高效＆＃34;这是一个很好的方式，说我无法理解这样做的好方法！

我很难确定如何设置当前周并在新的Firebase记录中引用它，然后在本周的上下文中转到上一周和下一周。

var ref = new Firebase('https://plnkr.firebaseio.com/tasks').startAt(start).endAt(end);

这是我正在使用的参考。 startAt（）基于当前周的开始，endAt（）是在此之后的7天。但我无法设置一个新的参考，以便在开始和结束的7天内添加或删除。

希望至少有道理。

以下是带有代码的plnkr：http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm?p=preview

我是否需要以某种方式修改现有的参考？如果我做一个新的参考将被正确地传递到范围？

非常感谢任何帮助。

angular.module('app').controller('MainCtrl', function($firebase, $scope) {


  var populateTasks = function(start, end){
    var ref = new Firebase('https://plnkr.firebaseio.com/tasks').startAt(start).endAt(end);
    var list = $firebase(ref).$asArray();
    $scope.list = list;
  }; 

  //initialize week
  var today = moment();
  var startThisWeek = today.startOf('week').valueOf();
  var endThisWeek = today.startOf('week').add(7, 'd').valueOf(); 
  var thisWeek = today.startOf('week');
  populateTasks(startThisWeek, endThisWeek);

  $scope.currentWeek = startThisWeek;

  var weekInMilli = moment.duration(1, 'weeks').valueOf();

  //set next week
  $scope.nextWeek = function(){
    $scope.currentWeek += weekInMilli;
    var startNextWeek = thisWeek.add(7, 'd').valueOf();
    var endNextWeek = thisWeek.add(14, 'd').valueOf();
    populateTasks(startNextWeek, endNextWeek);
  };
  //set previous week
  $scope.prevWeek = function(){
    $scope.currentWeek -= weekInMilli;
    var startLastWeek = thisWeek.subtract(7, 'd').valueOf();
    var endLastWeek = thisWeek.subtract(14, 'd').valueOf();
    populateTasks(startLastWeek, endLastWeek);
  };

  var last = null;
  $scope.priorityChanged = function(priority) {
    var current = moment(priority).startOf('day');
    var changed = last === null || !last.isSame(current);
    last = current;
    return changed;
  };

  $scope.getDayName = function($priority) {
    return moment($priority).format('dddd');
  };

  $scope.addTask = function(newTask) {
    $scope.list.$add({
      title: newTask.title,
      $priority: Firebase.ServerValue.TIMESTAMP
    });
  };

});

//view
<body ng-controller="MainCtrl">
    The current week is {{currentWeek | date}}<br/>
    <button ng-click="prevWeek()">previous week</button>
    <button ng-click="nextWeek()">next week</button>
    <form ng-submit="addTask(task); task.title=null">
      <input placeholder="Add Task" ng-model="task.title"/>
    </form>

    <li ng-repeat="item in list" ng-init="changed = priorityChanged(item.$priority)">
     <h3 ng-show="changed">{{getDayName(item.$priority)}}</h3>
     {{item.title}}  
    </li>

Answer 1

这是一个显示一种方法的傻瓜：http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm

通常，我根据当前周来初始化一周的开始和结束日期。然后我将这些值添加到$ scope。当我需要前进或后退一周时，我会为这些值添加一周的时间，然后将它们传递回populateTasks函数。

 //access a range in the array based on the week. My list is sorted by $priority timestamps. 
 var populateTasks = function(start, end) {
    $scope.start = start;
    $scope.end = end;
    var ref = new Firebase('https://plnkr.firebaseio.com/tasks').startAt(start).endAt(end);
    var list = $firebase(ref).$asArray();
    $scope.list = list;
  };

  //initialize the first week
  var setThisWeekStart = moment().startOf('week');
  var setThisWeekEnd = moment().startOf('week').add(7, 'days');
  $scope.startThisWeek = setThisWeekStart.valueOf();
  $scope.endThisWeek = setThisWeekEnd.valueOf();

  //get the tasks for the first week
  populateTasks($scope.startThisWeek, $scope.endThisWeek);

  //a week in milliseconds
  var weekInMilli = moment.duration(1, 'weeks').valueOf();

  //set next week
  $scope.nextWeek = function() {
    $scope.startThisWeek += weekInMilli;
    $scope.endThisWeek += weekInMilli;
    populateTasks($scope.startThisWeek, $scope.endThisWeek);
  };

  //set previous week
  $scope.prevWeek = function() {
    $scope.startThisWeek -= weekInMilli;
    $scope.endThisWeek -= weekInMilli;
    populateTasks($scope.startThisWeek, $scope.endThisWeek);
  };

我希望能帮到别人！感谢@Kato的帮助。他提出了最初的解决方案并让我获得成功。没有他就不可能做到。

什么是.startAt（thisWeek）和.endAt（nextWeek）使用moment.js和angularfire最有效的逻辑？

1 个答案: