我怎么能把一个火球阵列分为几周和几天
How can I sort a firebase angularfire array into weeks and days?
我正在制作一个待办事项列表,该列表按周(基于添加日期和完成日期)对任务进行分组,并按一周中的几天对任务进行编组。数据库结构如下:
users
userA
tasks
taskobject1
taskobject2
..
userB
tasks
taskobject1
task object2
我使用ng repeat将每个用户的所有任务显示到视图中。我希望能够首先对它们进行分类,然后是这样的:
#week1
--monday--
task a
task b
--tuesday--
task c
task d
..
#week2
--monday--
task a
..
即使是一个概念性的答案也会有所帮助。我不知道从哪里开始。
谢谢。
另请参阅这篇文章,它提供了一个进行分组的指令:有可能在angularfire中对数组进行.sort(compare)和.reverse吗?
你可以在这里采取一些方法。
按日期结构化的数据
如果记录总是通过这种结构获取,那么您可以通过这种方式存储它们;
/users/usera/tasks/week1/monday/taska/...
然后,您可以简单地将它们作为对象在tasks
级别获取,然后您将获得一个预排序的JSON对象,该对象的值嵌套在适当的级别。
这种方法与AngularFire不高度兼容,后者用于绑定对象或集合,而不是嵌套的数据树,但应谨慎使用。
使用优先级
第二种方法是为任务添加优先级,这将是一个历元时间戳。现在,当您想要获取它们时,您可以在树中的特定点启动At/endAt并获取记录。每个都会有一个时间戳,你可以用它来识别星期和日期。
var ref = new Firebase(ref).startAt(twoWeeksAgo).endAt(nextThursday);
$scope.list = $fireabse(ref).$asArray();
但是,这不会对条目进行分段。您需要检查ng repeat中的每个条目,然后动态添加标题:
// 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兼容。
滚动自己的列表
最后一种方法是去掉AngularFire,自己滚。例如,如果我们在每个任务中都存储了周和工作日,我们可以执行以下操作:
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>
相关文章:
- 如何按天、周、月对具有时间戳属性的对象进行分组
- 如何限制Fullcalender在过去几天禁用所有类型的操作
- 当我单击文本框时,如何获得几天的日期
- 如何仅使用日期选择器 Jquery 启用月份的最后几天
- “几周前”脚本不会计年
- 几天后,昨天停止工作jQuery
- 如果是今年,我如何让我的JavaScript隐藏过去的几个月和几天
- 如何从jquery日期选择器禁用周末和特定时间后的前几天的假期
- Moment.js-在几年、几个月和几天的两个生日中获得差异
- 使用moment js创建一个包含一周中的几天和一天中的几个小时的数组
- 我怎么能把一个火球阵列分为几周和几天
- Materializecss日期选择器仅在过去几天
- 计算和显示前几天
- 从日期中获取月的第几天
- 几天后删除图像
- 同月的一周中的几天,moment.js
- 用java脚本显示一周中的几天
- 延时功能可在几天内显示图像
- Moment.js中使用.fromNow()的相对日期-如何在几年、几个月和几天前聚在一起
- 如何禁用默认DHTML日历中的前几天