在 HTML 中,我想显示多行项目(任务时间线)。在每一行中,gantt-items,gantt-days 用于绘制一年 365 天呈现的 365 个小盒子。并且每一行都需要显示一个蓝色块,表示该任务的分配周期。{{timeline(item.data.sDate,item.data.eDate)}},每一行只包含一个蓝色块。
HTML
<ul>
<li ng-repeat="item in items.entities">
<ul class="gantt-items" style="width: 9150px; height: 35px" >
<li class="gantt-item" >
<ul class="gantt-days">
</ul>
</li>
</ul>
{{timeline(item.data.sDate,item.data.eDate)}}
</li>
</ul>
JS
angular.module('myApp', ['ngResource']);
function MainCtrl($scope,$resource){
$(document).ready(function(){
...
for(var i = 1; i < 366; i++){
$(".gantt-item ul.gantt-days").append('<li class="gantt-day" style="width: 25px"><span style="line-height: 35px; height: 35px">' + year + "-" + d.getMonth() + "-" + d.getDate() + '</span></li>');
d = new Date(d.getTime() + (24 * 60 * 60 * 1000));
}
...});
$scope.timeline = function GetLength(startDate, endDate){
var firstDay = new Date(new Date().getFullYear(), 0, 1);
var st1 = startDate.split("/");
var dt1 = new Date(st1[2], st1[1] - 1, st1[0]);
var st2 = endDate.split("/");
var dt2 = new Date(st2[2], st2[1] - 1, st2[0]);
var startPoint = ((dt1.getTime() - firstDay.getTime())/1000/60/60/24)*25;
var length = (1+(dt2.getTime() - dt1.getTime())/1000/60/60/24)*25;
$(".gantt-item ul.gantt-days").append('<span class="gantt-block" style="left:' + startPoint + 'px; width: ' + length + 'px; height: 27px"><strong class="gantt-block-label">Duration</strong></span>');
};
当我使用 ng-repeat 时,$(".gantt-item ul.gantt-days").append 不起作用。并且时间线(item.data.sDate,item.data.eDate) 在每一行中重复 n 次,这假设每个原始 n 行只显示一个项目。