Angularjs - 親スコープと子スコープの間でデータをマージする - タイムシートプロジェクト

Question

javascript/jqueryロジックで実行されたタイムシートプロジェクトのためにコードを変更しました。私はすべての機能をスムーズに動かすために角関数を利用しようとしていますが、ng-repeatテーブルでこれを動作させる方法は非常に混乱しています。

私が持っているのは、タイムシートデータ（子データ）とメインデータ（親データ）を保持する2つの別々のデータセットです。子データには親のIDが含まれており、その方法でリンクして、データを適切な行にマージするロジックを見つけ出します。ここで

はjavasript/jqueryのを使用して、作業テーブルです： https://jsfiddle.net/tj6bcjos/11/

<table class="table" id="my_table"> 
    <thead> 
    <tr> 
     <td>ID</td> 
     <td>Description</td> 
     <td>Start</td>  
     <td>End</td>  
     <td>Hours</td> 
     <td>Day or Night?</td>  
    </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

。

$.mockjax({ 
    url: "Ajax/Path1", 
    contentType: "application/json;odata=verbose", 
    responseText: { 
     d: { 
      results: [{ 
       ID: "17", 
       description: "Description 1" 
      }, { 
       ID: "22", 
       description: "Description 2" 
      }, { 
       ID: "34", 
       description: "Description 3" 
      }, { 
       ID: "54", 
       description: "Description 4" 
      }] 
     } 
    } 
}); 


$.mockjax({ 
    url: "Ajax/Path2", 
    contentType: "application/json;odata=verbose", 
    responseText: { 
     d: { 
      results: [{ 
       ID_of_parent: "17", 
       Day_or_night: "day", 
       Start: "2016-06-01 08:00", 
       End: "2016-06-01 10:00", 
       Hours: "2" 
      }, { 
       ID_of_parent: "17", 
       Day_or_night: "day", 
       Start: "2016-06-01 13:00", 
       End: "2016-06-01 14:00", 
       Hours: "1" 
      }, { 
       ID_of_parent: "17", 
       Day_or_night: "night", 
       Start: "2016-06-01 21:00", 
       End: "2016-06-01 22:00", 
       Hours: "1" 
      }, { 
       ID_of_parent: "22", 
       Day_or_night: "day", 
       Start: "2016-06-01 09:00", 
       End: "2016-06-01 10:00", 
       Hours: "1" 
      }, { 
       ID_of_parent: "22", 
       Day_or_night: "day", 
       Start: "2016-06-01 14:00", 
       End: "2016-06-01 15:00", 
       Hours: "1" 
      }, { 
       ID_of_parent: "54", 
       Day_or_night: "day", 
       Start: "2016-06-01 13:30", 
       End: "2016-06-01 16:00", 
       Hours: "2.5" 
      }] 
     } 
    } 
}); 

    data_array = {}; 
    data1=null 
    data2=null//1 is parent, 2 is child 

    $.ajax({ 
    url:"Ajax/Path1",   
    dataType: "json", 
    cache: false, 
    success: function (data) { 
      data1 = data 
     if(data1!=null && data2 !=null) 
    { 
     processData(); 
    } 

    }//sucess end 
    }); 

    $.ajax({ 
    url:"Ajax/Path2",   
    dataType: "json", 
    cache: false, 
    success: function (data) { 
      data2 = data; 
     if(data1!=null && data2 !=null) 
    { 
     processData(); 
    } 

    } 
    }); 
    //can only process if both data1 and 2 are available 
    function processData() 
    { 
     $(data1.d.results).each(function(i,p){ //loop thru parents 
      pId = p.ID; 
      //bring back the match children 
        children = data2.d.results.filter(function(d){ 

      return d.ID_of_parent == pId 
      }) 
     s=[] 
     e=[] 
     h=[] 
     n=[] //start, end hours... 
     $(children).each(function(i,c) 
     { 
        s.push(c.Start); 
      e.push(c.End); 
      h.push(c.Hours); 
      n.push(c.Day_or_night); 

     }) 
     rw = '<tr><td>'+p.ID+'</td><td>'+p.description+'</td><td>'+ 
      s.join('<br>')+'</td><td>'+e.join('<br>')+'</td><td>'+h.join('<br>') 
      +'</td><td>'+n.join('<br>')+'</td></tr>' 
     console.log(rw) 

     $('#my_table tbody').append(rw); 


     }) 
    } 

私の人生では、論理がどのようにng-repeatこの複合体にあるべきかを理解できません。誰もが同じタスクを達成するための簡単な方法を知っていますか？

Answer 1

私はあなたのプランナーをAngularを使用するように更新しました。 Angular対jquery/jsの方がはるかに簡単で読みやすくなることに同意していただければ幸いです。

https://jsfiddle.net/tj6bcjos/13/

マークアップ：

<table class="table" id="my_table"> 
    <thead> 
    <tr> 
     <td>ID</td> 
     <td>Description</td> 
     <td>Start</td>  
     <td>End</td>  
     <td>Hours</td> 
     <td>Day or Night?</td>  
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="entry in mergedSet"> 
     <td>{{entry.id}}</td> 
     <td>{{entry.description}}</td> 
     <td> 
     <ul> 
      <li ng-repeat="start in entry.start track by $index">{{start}}</li> 
     </ul> 
     </td> 
     <td> 
     <ul> 
      <li ng-repeat="end in entry.end track by $index">{{end}}</li> 
     </ul> 
     </td> 
     <td> 
     <ul> 
      <li ng-repeat="hour in entry.hours track by $index">{{hour}}</li> 
     </ul> 
     </td> 
     <td> 
     <ul> 
      <li ng-repeat="don in entry.dayOrNight track by $index">{{don}}</li> 
     </ul> 
     </td> 
    </tr> 
    </tbody> 
</table> 

スクリプト：

(function() { 
    'use strict'; 
    var app = angular.module('DemoApp', []); 

    app.controller('DemoCtrl', DemoCtrl); 
    DemoCtrl.$inject = ['$scope', 'DemoService']; 
    function DemoCtrl($scope, DemoService) { 
     var parentSet = []; 
     var childSet = []; 
     var mergedSet = []; 

     DemoService.pathOne() 
     .then(function(result) { 
     parentSet = result.d.results; 
     DemoService.pathTwo() 
     .then(function(result) { 
      childSet = result.d.results; 
      processData(); 
     }); 
     }); 

     function processData() { 
     angular.forEach(parentSet, function(parent) { 
      var mergeObject = { 
      description: "", 
      start: [], 
      end: [], 
      hours: [], 
      dayOrNight: [] 
      }; 
      var children = childSet.filter(function(child) { 
      return child.ID_of_parent == parent.ID; 
      }); 

      angular.forEach(children, function(child) { 
      mergeObject.start.push(child.Start); 
      mergeObject.end.push(child.End); 
      mergeObject.hours.push(child.Hours); 
      mergeObject.dayOrNight.push(child.Day_or_night); 
      }); 

     mergeObject.id = parent.ID; 
     mergeObject.description = parent.description; 
     mergedSet.push(mergeObject); 
     }); 
     $scope.mergedSet = mergedSet; 
    } 
    } 

    app.service('DemoService', DemoService); 
    DemoService.$inject = ['$q']; 
    function DemoService($q) { 
    var DemoService = this; 
    DemoService.pathOne = pathOne; 
    DemoService.pathTwo = pathTwo; 

    function pathOne() { 
     var deferred = $q.defer(); 
     deferred.resolve({ 
     d: { 
      results: [{ 
       ID: "17", 
       description: "Description 1" 
      }, { 
       ID: "22", 
       description: "Description 2" 
      }, { 
       ID: "34", 
       description: "Description 3" 
      }, { 
       ID: "54", 
       description: "Description 4" 
      }] 
     } 
     }); 
     return deferred.promise; 
    } 

    function pathTwo() { 
     var deferred = $q.defer(); 
     deferred.resolve({ 
     d: { 
      results: [{ 
      ID_of_parent: "17", 
      Day_or_night: "day", 
      Start: "2016-06-01 08:00", 
      End: "2016-06-01 10:00", 
      Hours: "2" 
      }, { 
      ID_of_parent: "17", 
      Day_or_night: "day", 
      Start: "2016-06-01 13:00", 
      End: "2016-06-01 14:00", 
      Hours: "1" 
      }, { 
      ID_of_parent: "17", 
      Day_or_night: "night", 
      Start: "2016-06-01 21:00", 
      End: "2016-06-01 22:00", 
      Hours: "1" 
      }, { 
      ID_of_parent: "22", 
      Day_or_night: "day", 
      Start: "2016-06-01 09:00", 
      End: "2016-06-01 10:00", 
      Hours: "1" 
      }, { 
      ID_of_parent: "22", 
      Day_or_night: "day", 
      Start: "2016-06-01 14:00", 
      End: "2016-06-01 15:00", 
      Hours: "1" 
      }, { 
      ID_of_parent: "54", 
      Day_or_night: "day", 
      Start: "2016-06-01 13:30", 
      End: "2016-06-01 16:00", 
      Hours: "2.5" 
      }] 
     } 
     }); 
     return deferred.promise; 
    } 
    } 

})(); 

Answer 2

これはこのように書くことができます。

まずng-repeatを使用し、変数の上にテーブルが今、あなたのcontrollerで空の配列であることをtimesheetを宣言

timesheetを言うレンダリングするテンプレートを記述します。代わりにrwとappendingを形成するprocessData機能で$scope.timesheet = []

次のように、一時的な変数にプッシュし、最終的に$scope.timesheetに割り当てます。 UIがtimesheet変数に正しくバインドされていると、データが自動的に表示されます。