角度Ui网格显示在行扩展列表视图不是一个子网格，并通过选定的行ID和数据

Question

我想显示一个列扩大的UI网格而不是一个子网格的扩张 当用户单击该行的扩展图标，而不是显示我想要显示列表视图的子网格，我可以到达可以在一行中调用静态列表视图但无法传递相关数据的点一行到列表

下面是工作plunker http://plnkr.co/edit/PZL6UfWmg2h00sw36FTk?p=preview

这是我的控制器：

angular.module('availability',['ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning','angular.filter']) 

angular.module('availability').controller('Availability.CTRL', 
                ['$scope','$log','$rootScope', 
    function($scope,$log,$rootScope){ 


     var weeklyAvailability = {}; 
     $scope.gridOptions = { 
      expandableRowTemplate: 'availability.detailed.view.tpl.html', 
      expandableRowHeight: 150, 
      expandableRowScope: { 
       rowIdToBePassed : weeklyAvailability 
      }, 
      columnDefs: [ 
       { field: 'email' } 
      ], 

      onRegisterApi: function (gridApi) { 
       gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) { 
        if (row.isExpanded) { 

         //The Below will come from the server once I get the id of the worker in the selected row 
         var testData = [ 
          { 
           "availabilityDate": "2015-04-01T04:18:51.080Z", 
           "availabilityDay": "Wednesday", 
           "availabilityStartTime": "2015-04-01T05:18:51.105Z", 
           "availabilityEndTime": "2015-04-02T03:18:51.110Z", 
           "available": false, 
           "id": "551b71d8921933a6cbc90495", 
           "workerId": "5500d45b1d1dff783e895f72" 
          }, 
          { 
           "availabilityDate": "2015-04-01T04:18:51.080Z", 
           "availabilityDay": "Wednesday", 
           "availabilityStartTime": "2015-04-01T06:18:51.105Z", 
           "availabilityEndTime": "2015-04-01T05:18:51.110Z", 
           "available": false, 
           "id": "551b71d8921933a6cbc90496", 
           "workerId": "5500d45b1d1dff783e895f72" 
          } 
         ]; 

         //I want to pass the data I receive from the server to the expanded scope 
         //The below subData is present in availability.detailed.view.tpl.html 
         //Cant figure out a way to pass the testData field to subData 
         $scope.subData = testData; 
         //row.entity.weeklyAvailability.data = testData; 
        } 
       }); 
      } 

     }; 

    var workers = [ 
      { 
      "email": "worker@worker.com", 
      "id": "5500d45b1d1dff783e895f72" 
      }, 
      { 
      "email": "worker2@worker.com", 
      "id": "550368c058b17f6ca096e397" 
      } 
     ] 

     $scope.gridOptions.data = workers; 


    }]); 

Answer 1

UI-Grid使用隔离范围，因此当您设置$scope.subData时，网格不知道它。您可以通过grid.appScope属性访问您的模板中的控制器范围。因此，这将显示您的数据：

<ul ng-repeat="(key, value) in grid.appScope.subData | groupBy: 'availabilityDay'"> 

这里的问题是，您使用的是单变量的范围为所有行，所以如果你有多个行扩大他们都会表现出相同的数据。有几种方法可以正确执行此操作：

1. 您可以在获取初始数据集后预先填充“子数据”。这就是可扩展的网格教程。
2. 但是，当行被展开时，它看起来像要异步获取数据，因此在rowExpandedStateChanged中需要一种将数据获取到扩展行的范围的方法。你给出的唯一变量是row，所以你必须把它放在那里。无论是在row本身还是row.entity。

下面是一个例子：

<!-- your expanded row template --> 
<ul ng-repeat="(key, value) in row.entity.subData | groupBy: 'availabilityDay'"> 

// In your rowExpandedStateChanged handler 
row.entity.subData = testData; 

我已经分叉的plunker显示这是如何工作的。请注意，我已经添加随机的availabilityDay显示具有不同值的每一行：http://plnkr.co/edit/WD9iwLzoBDYDIvneDJJm?p=preview

Answer 2

我这是怎么传递的行数据为扩大行范围：

   scope.GridOptions = { 
        data: jsonArray, 
        columnDefs: [ 
         { name: "Full Address", field: "FullAddress" }, 
         { name: "Suburb", field: "Suburb" }, 
         { name: "Price", field: "Price" }, 
         { name: "Status", field: "Status" }, 
         { name: "Sale Type", field: "SaleType" }, 
         { name: "Date Created", field: "CreateDate" } 
        ], 
        expandableRowTemplate: 'template.html', 
        expandableRowHeight: 150, 
        onRegisterApi: function (gridApi) { 
         gridApi.expandable.on.rowExpandedStateChanged(scope, function (row) { 
          if (row.isExpanded) { 
           scope.GridOptions.expandableRowScope = row.entity; 
          } 
         }); 
        } 
       }; 

的想法是使用行实体作为扩展区域的范围。