什么是.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 联系我们: