角度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; 
          } 
         }); 
        } 
       }; 

的想法是使用行實體作爲擴展區域的範圍。