如何将 firebase angularfire 数组分为几周和几天? [英] How can I sort a firebase angularfire array into weeks and days?

问题描述

我正在制定一个待办事项列表，该列表按周(基于添加和完成日期)对任务进行分组，并按一周中的天对任务进行分组.数据库结构如下:

用户用户A任务任务对象 1任务对象2..用户B任务任务对象 1任务对象2

我正在使用 ng-repeat 将所有任务显示到每个用户的视图中.我希望能够首先按它们所属的星期对它们进行排序，然后像这样:

#week1- 周一 -任务一任务b- 周二 -任务c任务d..#week2- 周一 -任务一..

即使是概念性的答案也会有帮助.我不知道从哪里开始.

谢谢.

解决方案

另见这篇文章，它提供了进行此分组的指令:是否可以在 angularfire 中对数组进行 .sort(compare) 和 .reverse?

您可以在此处采用几种方法.

按日期结构化的数据

如果记录总是由这个结构获取，你可以这样存储它们；

/users/usera/tasks/week1/monday/taska/...

然后您可以简单地在 tasks 级别将它们作为对象获取，您将获得一个预先排序的 JSON 对象，其值嵌套在适当的级别.

这种方法与 AngularFire 不高度兼容，AngularFire 用于绑定对象或集合，而不是嵌套的数据树，但应谨慎使用.

使用优先级

第二种方法是添加任务的优先级，这将是一个纪元时间戳.现在，当您想要获取它们时，您可以在树中的 startAt/endAt 特定点，并获取记录.每个都有一个时间戳，您可以使用它来识别星期和日期.

var ref = new Firebase(ref).startAt(twoWeeksAgo).endAt(nextThursday);$scope.list = $fireabse(ref).$asArray();

然而，这不会分割条目.您需要检查 ng-repeat 中的每个条目并动态添加标题:

//在控制器中var last = null;$scope.priorityChanged(priority) {/*** 在这里，我们将使用像 moment.js 这样的库来将优先级解析为日期* 然后做一个比较，看两个元素是不是同一天的，比如**/var current = moment(priority).startOf('day');var 已更改 = 最后一次 === null ||！last.isSame(当前)；最后=当前；退货变了；};$scope.getDayName = 函数($priority){return moment($priority).format('dddd');};<!-- 在视图中--><li ng-repeat="列表中的项目" ng-init="changed = priorityChanged(item.$priority)"><h3 ng-show="changed">{{getDayName(item.$priority)}}</h3>{{item|json}}

这种方法很容易与 AngularFire 兼容.

滚动您自己的列表

最后一种方法是删除 AngularFire 并推出自己的方法.例如，如果我们将周和工作日存储在每个任务中，我们可以执行以下操作:

app.service('DatedList', function($timeout) {返回函数(pathToList){变量列表 = {};pathToList.on('child_ added', function(snap) {$timeout(function() {//发生变化时强制 Angular 运行 $digestvar data = snap.val();var week_number = data.week;var week_day = data.day;列表[week_number][week_day] = 数据；});});//todo:为child_changed和child_removed写类似的处理退货清单；}});app.controller('ctrl', function($scope, DatedList) {var listRef = new Firebase(URL).limit(500);$scope.weeks = DatedList(listRef);});<div 控制器="ctrl"><div ng-repeat="(week, days) in week"><h1>{{周}}</h1><div ng-repeat="(day, items) in days"><h2>{{day}}</h2><div ng-repeat="项目中的项目">{{item|json}}

I'm working on a todo list that groups tasks by week (based on added and completion dates) and groups tasks by the days of the week. The database structure looks like this:

users
  userA
    tasks
      taskobject1
      taskobject2
      ..
  userB
    tasks
      taskobject1
      task object2

I'm using an ng-repeat to display all the tasks to the view for each user. I would like to be able to sort them first by which week they fall into and then like this:

#week1
--monday--
task a
task b
--tuesday--
task c
task d
..
#week2
--monday--
task a
..

Even a conceptual answer would be helpful. I don't know where to start exactly.

Thanks.

解决方案

See also this post, which provides a directive to do this grouping: Is it possible to .sort(compare) and .reverse an array in angularfire?

There are a few approaches you could take here.

Data Structured by Date

If the records will always be fetched by this structure, you can just store them that way;

/users/usera/tasks/week1/monday/taska/...

Then you can simply fetch them at the tasks level as an object, and you will obtain a pre-sorted JSON object with values nested at the appropriate levels.

This approach is not highly compatible with AngularFire, which is intended for binding objects or collections, not nested trees of data, but should work with some care.

Using Priorities

A second approach would be to add priorities on to the tasks, which would be an epoch timestamp. Now when you want to fetch them, you can startAt/endAt specific points in the tree, and get the records. Each will have a timestamp on it you can use to identify the week and day.

var ref = new Firebase(ref).startAt(twoWeeksAgo).endAt(nextThursday);
$scope.list = $fireabse(ref).$asArray();

However, this does not segment the entries. You would need to either examine each entry in the ng-repeat and add headers on the fly:

// in the controller
var last = null;
$scope.priorityChanged(priority) {
   /** 
    * here we would use a library like moment.js to parse the priority as a date
    * and then do a comparison to see if two elements are for the same day, such as 
    **/
   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');
};

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

This approach is readily compatible with AngularFire.

Roll Your Own List

A last approach would be to cut out AngularFire and roll your own. For example, if we have the week and weekday stored on each task, we could do the following:

app.service('DatedList', function($timeout) {
   return function(pathToList) {
      var list = {};

      pathToList.on('child_added', function(snap) {
         $timeout(function() { // force Angular to run $digest when changes occur
            var data = snap.val();
            var week_number = data.week;
            var week_day = data.day;
            list[week_number][week_day] = data;
         });
      });

      //todo: write similar processing for child_changed and child_removed

      return list;
   }
});

app.controller('ctrl', function($scope, DatedList) {
   var listRef = new Firebase(URL).limit(500);
   $scope.weeks = DatedList(listRef);
});

<div controller="ctrl">
  <div ng-repeat="(week, days) in weeks">    
     <h1>{{week}}</h1>
     <div ng-repeat="(day, items) in days">
        <h2>{{day}}</h2>
        <div ng-repeat="item in items">
           {{item|json}}
        </div>
     </div>
  </div>
</div>

这篇关于如何将 firebase angularfire 数组分为几周和几天?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！