Angularjs - 부모와 자식 범위 간의 데이터 병합 - 작업 표 프로젝트

Question

javascript/jquery 논리를 사용하여 작성한 작업 표 프로젝트의 코드를 수정했습니다. 각도 함수를 이용하여 모든 것을 원활하게 처리하려고 노력하고 있지만, ng-repeat 테이블에서이 작업을 수행하는 방법에 대해 매우 혼란 스럽습니다.

내가 가진 것은 작업 표 데이터 (하위 데이터)와 주 데이터 (상위 데이터)를 보유하는 2 개의 개별 데이터 세트입니다. 자식 데이터는 부모의 ID를 포함하고 있으며 그런 식으로 링크 한 다음 데이터를 적절한 행에 병합하는 논리를 찾습니다. 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> 

: 여기

는 기능인 자바 스크립트/JQuery와 사용 작업대이다.

$.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); 


     }) 
    } 

나는 논리적 인 논리가이 복합체에 있어야한다는 것을 알아 채지 못합니다. 누구든지 동일한 작업을 수행하기위한 쉬운 방법을 알고 있습니까?

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 변수에 바운드되면 데이터가 자동으로 표시됩니다.