1

HTMLで複数行のアイテム(タスクタイムライン)を表示したい。各行では、gantt-items,gantt-days を使用して、1 年に 365 日表示される 365 個の小さなボックスをプロットします。また、各行には青いブロックを表示する必要があります。これは、このタスクの割り当て期間を意味します。{{timeline(item.data.sDate,item.data.eDate)}}、各行には青いブロックが 1 つだけ含まれています。

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 が機能しません。そして、timeline(item.data.sDate,item.data.eDate) は各行で n 回繰り返されます。これは、n 行の raw ごとに 1 つのアイテムのみを表示することを想定しています。

4

1 に答える 1

2

これは、ディレクティブ内の要素がng-repeatDOM コンパイル後に表示されるために発生します。
使ってみてください$watch:

$scope.$watch('items.entities', 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));
     }
});
于 2013-03-02T17:30:48.240 に答える