什么是.startAt(thisWeek)和.endAt(nextWeek)使用moment.js和angularfire最有效的逻辑?

[英]What is the most efficient logic to .startAt(thisWeek) and .endAt(nextWeek) using moment.js and angularfire?


"efficient" is a nice way of saying I can't fathom a good way to do it!

“高效”是一种很好的说法,我无法理解这样做的好方法!

I'm having a tough time figuring out how to set the current week and reference it in a new Firebase record and then go to the previousWeek and nextWeek in the context of the current week.

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

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

This is the reference I am using. startAt() is based on the beginning of the current week, endAt() is 7 days after that. But I can't wrap my head around setting up a new reference to add or remove 7 days from start and end.

这是我正在使用的参考。 startAt()基于当前周的开始,endAt()是在此之后的7天。但是,我无法围绕设置一个新的引用来添加或删除开始和结束7天。

Hopefully that at least makes some sense.

希望至少有道理。

Here is the plnkr with the code so far: http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm?p=preview

到目前为止,这是带有代码的plnkr:http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm?p = preview

Do I need to modify the existing ref somehow? If I make a new ref will that be passed along to the scope properly?

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

Any help would be much appreciated.

任何帮助将非常感激。

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>

1 个解决方案

#1


2  

Here's a plunkr that shows one way of doing it: http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm

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

Generally, I initialized the week with a start and end date based on the current week. Then I added those values to $scope. When I needed to go forward or backward a week I would add a weeks worth of time to those values and then pass them back in to the populateTasks function.

通常,我根据当前周来初始化一周的开始和结束日期。然后我将这些值添加到$ 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);
  };

I hope that helps somebody! Thanks to @Kato for his help. He came up with the original solution and set me up for success. Couldn't have done it without him.

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/09/25/2fcceb637f8fc606b08f9d6595ff4777.html



 
  © 2014-2022 ITdaan.com 联系我们: