Angularjs - 合并父母和孩子之间的范围数据 - 时间表项目

Question

我返工我的代码，以角为香港专业教育学院用JavaScript/jQuery的逻辑做一个时间表项目。我试图利用角函数来让一切顺利进行，但我对如何在ng-repeat表上工作感到困惑。

我有什么是我保持时间表数据（子数据），然后将主数据（母公司数据）两个独立的数据集。子数据包含父代的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中重复这个复杂。有谁会知道一个简单的方法来完成相同的任务吗？

Answer 1

我已更新您的plunker以使用Angular。我希望你会同意这在Angular vs 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并呈现了饭桌变量说timesheet

现在宣布timesheet在你的controller空数组的模板。像$scope.timesheet = []

接着在processData函数，而不是形成rw和appending，它推到一个临时变量，最后将其分配给$scope.timesheet。如果UI正确绑定到timesheet变量，那么数据将自动显示。