我如何排序火力angularfire阵列分为周，天呢？ [英] How can I sort a firebase angularfire array into weeks and days?

问题描述

我的工作是按周组的任务（基于添加和完成日期）和团体任务在本周的天待办事项列表上。数据库结构如下：

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

我使用的是NG重复来显示所有的任务，每个用户的视图。我希望能够将它们首先由他们落入这一周，然后进行排序是这样的：

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.

感谢。

推荐答案

也看到这个职位，它提供了一个指令，要做到这一点分组：<一href=\"http://stackoverflow.com/questions/26047958/is-it-possible-to-sortcompare-and-reverse-an-array-in-angularfire/26051475#26051475\">Is有可能的.sort（比较）和angularfire .reverse数组？

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.

数据按日期结构

如果记录将始终由这种结构可读取，你可以存储他们的方式;

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

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

然后，您只需在任务获取它们水平作为一个对象，你将获得pre排序JSON对象，嵌套在适当的水平值

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.

这做法是不与AngularFire，其目的是绑定对象或集合，数据不嵌套树木高度兼容，但应与一些护理工作。

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.

使用优先级

第二种方法是添加优先的到的任务，这将是一个划时代的时间戳。现在，当你想接他们，就可以在树startAt / ENDAT具体问题，并得到了记录。每次都会有它的时间戳可以用来识别一周一天。

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();

然而，这并不段的条目。您将需要检查或者在NG-重复每个条目和动态添加页眉：

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>

此方法与AngularFire容易兼容。

This approach is readily compatible with AngularFire.

滚动自己的列表

最后一个办法是切断AngularFire和滚动您自己。例如，如果我们有存储在每个任务的一周工作日，我们可以做到以下几点：

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>

这篇关于我如何排序火力angularfire阵列分为周，天呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！