- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
更新:我遇到的问题是结合执行三件事:
这是所有代码的 plnkr:http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm
我正在使用priorityChanged函数根据任务日期的比较来添加标题: // Controller var 最后 = null; $scope.priorityChanged = 函数(优先级){ var current = moment(priority).startOf('day'); var 改变 = 最后 === null || !last.isSame(当前); 最后=当前; 返回已更改; };
//view
<li ng-repeat="task in list track by task.$id">
<h3 ng-show="priorityChanged(task.$priority)">{{getDayName(task.$priority)}}</h3>
并在任务完成时将任务移至列表底部我在填充任务列表时使用 .sort 函数:
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();
list.sort(compare);
list.$watch(function() {
list.sort(compare);
});
function compare(a, b) {
return a.completeTime - b.completeTime;
}
$scope.list = list;
};
这些方法似乎无法协同工作。有没有办法将它们组合起来,以便当列表重新排序时 ng-repeat 将再次运行任务并添加必要的标题?这是理想的解决方案吗?标题可以分开吗?
更新:我将 ng-init 功能直接移至 h3 中以尝试使其再次运行,但在这种情况下它不会显示标题。
更新2:如果至少有两个 $priority 日期是唯一的,则标题似乎会显示,但我仍然存在删除或移动关联列表项以删除连接的标题的问题。
最佳答案
使用指令
您可以创建一个指令,通过嵌套客户端内容来简化事情。 demo
app.directive('repeatByWeek', function($parse, $window) {
return {
// must be an element called <repeat-by-week />
restrict: 'E',
// replace the element with template's contents
replace: true,
templateUrl: 'repeat.html',
// create an isolate scope so we don't interfere with page
scope: {
// an attribute collection="nameOfScopeVariable" must exist
'master': '=collection'
},
link: function(scope, el, attrs) {
// get the global moment lib
var moment = $window.moment;
scope.weeks = [];
updateList();
// whenever the source collection changes, update our nested list
scope.master.$watch(updateList);
function updateList() {
scope.weeks = sortItems(parseItems(scope.master));
}
function sortItems(sets) {
var items = [];
// get a list of weeks and sort them
var weeks = sortDescending(Object.keys(sets));
for(var i=0, wlen=weeks.length; i < wlen; i++) {
var w = weeks[i];
// get a list of days and sort them
var days = sortDescending(Object.keys(sets[w]));
var weekEntry = {
time: w,
days: []
};
items.push(weekEntry);
// now iterate the days and add entries
for(var j=0, dlen=days.length; j < dlen; j++) {
var d = days[j];
weekEntry.days.push({
time: d,
// here is the list of tasks from parseItems
items: sets[w][d]
});
}
}
console.log('sortItems', items);
return items;
}
// take the array and nest it in an object by week and then day
function parseItems(master) {
var sets = {};
angular.forEach(master, function(item) {
var week = moment(item.$priority).startOf('week').valueOf()
var day = moment(item.$priority).startOf('day').valueOf();
if( !sets.hasOwnProperty(week) ) {
sets[week] = {};
}
if( !sets[week].hasOwnProperty(day) ) {
sets[week][day] = [];
}
sets[week][day].push(item);
});
console.log('parseItems', sets);
return sets;
}
function sortDescending(list) {
return list.sort().reverse();
}
}
}
});
repeat.html 模板:
<ul>
<!--
it would actually be more elegant to put this content directly in index.html
so that the view can render it, rather than needing a new directive for
each variant on this layout; transclude should take care of this but I
left it out for simplicity (let's slay one dragon at a time)
-->
<li ng-repeat="week in weeks">
<h3>{{week.time | date:"MMMM dd'th'" }}</h3>
<ul>
<li ng-repeat="day in week.days">
<h4>{{day.time | date:"MMMM dd'th'" }}</h4>
<ul>
<li ng-repeat="task in day.items">
<input type="checkbox" ng-model="task.complete" ng-change="isCompleteTask(task)">
<input ng-model="task.title" ng-change="updateTask(task)">
<span ng-click="deleteTask(task)">x</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
其他想法
最有可能的是,您只需将更改移出 ng-init 即可。我不认为当元素移动/重新排序时会重新运行。
<li ng-repeat="task in list">
<h3 ng-show="priorityChanged(task.$priority)">{{getDayName(task.$priority)}}</h3>
<!-- ... -->
</li>
由于您的列表可能会重复使用多次,因此您还可以通过 using track by 获得相当显着的速度提升。
<li ng-repeat="task in list track by task.$id">
如果这不能解决问题,那么可能是时候考虑编写自己的指令(这些指令比听起来更有趣),并且可能考虑搁置 AngularFire 并直接找到源代码。
您确实想要一个更深层嵌套的数据结构,您可以在多个级别进行迭代,并且您可能需要在客户端或服务器上自行构造该数据结构,现在您已经了解了希望如何组织它们(本质上是按周分组的功能)。
关于javascript - 是否可以在 angularfire 中对数组进行 .sort(compare) 和 .reverse ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26047958/
我经常有一个 Comparator 类型,而我需要一个 Comparable 类型,反之亦然。是否有可重用的 JDK API 可以相互转换?类似的东西: public static Comp
我怎么能写这个 Comparator sort = (i1, i2) -> Boolean.compare(i2.isOpen(), i1.isOpen()); 像这样(代码不起作用): Compa
请帮助她。我有一个错误 Collections.sort(var4, new Comparator() { public int compare(TreeMap var1, TreeMa
学习 Kotlin,我试图了解 Java 的 Comparator接口(interface)有效 - 主要是 compare() 函数,这样我就可以利用它。 我已经尝试阅读 compare() 的文档
我有以下程序 List numbers = Arrays.asList("10", "68", "97", "9", "21", "12"); Collections.sort(numbers, (
我想根据嵌套类的属性对如下所示的列表进行排序。 class Test { private NestedClass nestedClass; private AnotherNes
我很好奇“Beyond Compare”的算法是如何工作的? 我猜想他们使用了一种标准的(众所周知的?)算法来实现“字符与字符”的比较。你知道这个算法的名字吗?谢谢 最佳答案 Beyond Compa
这个问题已经有答案了: How does the sort() method of the Collection class call the Comparable's compareTo()? (1
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicates: difference between compare() and compareTo() Java: What i
我被要求为某个类实现Comparable或Compartor,我们称之为V。 假设我有一个 V 的 Collection 或 Set(还不确定,但我认为这并不重要)。 V 有一个方法,可以评估它的“权
我正在查看Java8中实现的Comparator.comparing方法的源代码 这是代码 public static Comparator comparing( Function
假设我有一个类 ClassA,它的属性是 ClassB: public ClassA { private String attr; private ClassB classB; } p
我有一个自定义比较器,其比较逻辑如下: List l = new ArrayList(); l.add("tendercoupon"); l.add("giftcard
我正在努力实现一个处理 Comparator 和 Comparable 接口(interface)的层次结构。我不清楚的几件事: 如果我将比较器添加到比较器链中,这段代码究竟意味着什么 chain.a
正在关注 this question关于按另一个列表对列表进行排序,我尝试做同样的事情 - 但由于某种原因它对我不起作用。我错过了什么? List nums = Arrays.asList(5
假设我有一个像这样的领域模型: class Lecture { Course course; ... // getters } class Course { Teache
在表达式 > 中像这样的签名 public static > foo(T x) { ... } T的描述递归地依赖于Comparable . 如果T延伸Comparable ,和Comparable延
所有“数字”比较器(例如 Comparer.Default 、 Comparer.Default 等)返回 -1 的原因是什么? , 0或 1 ,但是 Comparer.Default和 Compar
(如果这是重复的,请指出正确的答案!我搜索并阅读了几个(> 5)个相关问题,但似乎没有一个是正确的。还查看了泛型常见问题解答和其他来源...) 当一个集合类接受一个比较器时,它应该具有 Compara
SBCL 1.3.1 综上所述,a是一个列表,'(7),b通过setq sbcl This is SBCL 1.3.1.debian, an implementation of ANSI Common
我是一名优秀的程序员,十分优秀!