Angular Ui-Grid display List view on row expansion not a Subgrid and pass the selected row id and data

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-网格使用一个独立的作用域，所以当你设置$scope.subData时网格并不知道它。您可以通过 grid.appScope 属性在模板中访问控制器的范围。所以这将显示您的数据：

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

问题在于您对所有行都使用了一个作用域变量，因此如果您展开多行，它们都会显示相同的数据。有几种方法可以正确地做到这一点：

您可以在获取初始数据集后预填充 "sub-data"。这就是可扩展网格教程的做法。
但是，您似乎希望在扩展行时异步获取数据，因此在您的 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;
                            }
                        });
                    }
                };

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

Angular Ui-Grid display List view on row expansion not a Subgrid and pass the selected row id and data

Angular Ui-Grid display List view on row expansion not a Subgrid and pass the selected row id and data

angularjs

ng-grid

angular-ui-grid