Question

我正在尝试显示ui-grid的行扩展而不是子网格的列表视图例如，当用户单击行的扩展图标，而不是显示我希望显示列表视图的子网格时，我能够达到一个点，我可以在一行中调用静态列表视图但无法通过与列表行相关的数据

下面是工作的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'">

这样做的问题在于您为所有行使用单个范围变量，因此如果您展开多行，则它们都会显示相同的数据。有几种方法可以做到这一点：

您可以预先填充＆＃34;子数据＆＃34;在获取初始数据集之后。这就是可扩展网格教程的用途。
但是，在扩展行时，您似乎想要异步获取数据，因此在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;

我已经分叉你的傻瓜，以显示这可能是如何工作的。请注意，我已将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显示行扩展的List视图而不是Subgrid并传递选定的行id和数据

2 个答案: