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

Question

我正在将我的代码重新设计为一个时间表项目的 Angular ，该项目是使用 javascript/jquery 逻辑完成的。我试图利用 Angular 函数来让一切顺利运行，但我对如何在 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。我希望您会同意，与 jquery/js 相比，Angular 更容易且更具可读性。

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

})();