angularjs - ng-repeat の問題、n*n 回繰り返しています

Question

JSON object{"count": 4, "entities": [{"model": "project", "data": {"project": "test1", "startDate": 2013/03/15, "endDate": "2013/03/31"}、"id": 1}、{"モデル": "プロジェクト"、"データ": {"プロジェクト": "test2"、"開始日": 2013/01/15、"終了日": "2013/01/31"}, "id": 2}, {"モデル": "プロジェクト", "データ": {"プロジェクト": "test3", "開始日": 2013/02/15, "endDate": "2013/02/31"}, "id": 2}], "モデル": "プロジェクト", "メソッド": "get_entities"}

プロジェクトのリストとその期間を表示する表があります。表の左側にng-repeat、プロジェクトの名前をリストするために使用します{{item.data.project}}。それは正常に動作します。

右側には、各プロジェクトに対応する期間 (開始日から終了日まで) があります。そのため、別のエンティティを使用しng-repeatて各エンティティを取得し、それを使用timeline(starDate,endDate)してブロックを描画します。当然、各行 (各プロジェクト) には 1 つの時間ブロックがあり、n 個のプロジェクトがある場合、各行に 1 つの時間ブロックを持つ n 行が表示されます。ただし、現在は各行に n 個のブロックが表示されています。1 つの行に、すべてのプロジェクトのすべてのタイム ブロックが表示されます。

<div class="content">
   <figure class="gantt">
      <figcaption>All Projects</figcaption>
       <aside>
        <ul class="gantt-labels" style="margin-top: 71px">
         <li class="gantt-label" ng-repeat="item in items.entities"><strong style="line-height:  35px; height: 35px">{{item.data.project}}</strong></li>
        </ul>
       </aside>
    <section class="gantt-data">
    <header>
      <ul class="gantt-months" style="width: 9150px">            
      </ul>
      <ul class="gantt-days" style="width: 9150px">            
      </ul>
    </header>

    <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>

  </section>
</figure>

JavaScript では、$(".gantt-item ul.gantt-days").append365 日を表す 365 個のボックスを描画するために使用します。タイムライン方式は、プロジェクトの期間である青いブロックを描画することです。

angular.module('myApp', ['ngResource']);
 function MainCtrl($scope,$resource){
  $(document).ready(function(){
     ...
     $scope.$watch('items.entities', function(){
      for(var i = 1; i < 366; i++){
        $("header ul.gantt-days").append('<li class="gantt-day" style="width: 25px"><strong style="line-height: 35px; height: 35px">' + d.getDate() + '</strong></li>');
        d = new Date(d.getTime() + (24 * 60 * 60 * 1000));
      }
      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>');
      };