angular ui-网格保存来自不同范围对象的预填充值

Question

我有 2 页（第 1 节，第 2 节）共享同一个控制器。当我在 section1 中输入值时，这些值存储在 sessionstorage 中，我能够在 section2 网格中检索和显示它。但是，此值不会存储在 section2 对象中。我希望它能够将来自 section1 的值保存在 section2 对象中，以便我可以使用 ui-grid 中填充的 section1 和 section2 值填充摘要页面。目前 section2 中的值显示为空，因为它没有保存在范围对象中。

更新：

请注意，这个问题更多是关于如何以 ui-网格方式在 ui-网格行中保存填充的数据（无需任何用户编辑）。

ui-第 1 部分的网格：

$scope.section1 = { 
            enableCellEditOnFocus: true, 
            enableCellEdit:true, 
            enableSorting: false,
            rowHeight:55,
            enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
            enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER,
            columnDefs:[{
                    field: 'piidata',
                    displayName:'PII or Firm Sensitive Data'
            },
            {   
                    field: 'location',
                    displayName: 'Location'
            },
            {
                    field:'risklevel',
                    displayName: 'Risk Severity Level',
                    editType: 'dropdown',
                    enableCellEdit:true,
                    editableCellTemplate: 'ui-grid/dropdownEditor',
                    editDropdownOptionsArray: $scope.levels,
                    editDropdownIdLabel: 'option',
                    editDropdownValueLabel: 'option'
                }],
                onRegisterApi: function(gridApi) {
                     grid = gridApi.grid;
              }

        };

ui-section2 的网格：

        $scope.section2 = { 
            enableCellEditOnFocus: true, 
            enableCellEdit:true, 
            enableSorting: false,
            rowHeight:55,
            enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
            enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER,
            columnDefs:[
                {
                        field: 'piidata',
                        displayName:'PII or Firm Sensitive Data',
                        cellTemplate : '<div >{{grid.appScope.piidata()}}</div>'
                },
                {   
                        field: 'location',
                        displayName:'Location',
                        cellTemplate : '<div >{{grid.appScope.location()}}</div>'
                },
                {
                        field:'risklevel',
                        displayName: 'Risk Severity Level',
                        cellTemplate : '<div>{{grid.appScope.risklevel()}}</div>'
                }
            ],
            onRegisterApi: function(gridApi) {

              }

        };

会话存储值：

$scope.piidata = function (){
                return $sessionStorage.section1.data[0].piidata;
            }

            $scope.location = function (){
                return $sessionStorage.section1.data[0].location;
            }


            $scope.risklevel = function (){
                return $sessionStorage.section1.data[0].risklevel;
            }

Answer 1

您有几个选项可以将值获取到 section2 的范围内。

你说你能把它放到本地存储中。然后你可以在共享控制器的开头从本地存储中获取这些值，并将它们保存在范围中。
使用 rootScope 来存储这些值。首先，将 $rootScope 添加为依赖项，然后仅使用该范围来存储值。当您切换到 section2
使用服务来存储范围值。然后在控制器的开头，只需从该服务中询问（使用工厂作为服务类型）。这些值将在两个部分中更新，因为它们使用相同的控制器。

在所有这些选项中，我可以说选项 3 可能是最 angular 的方式。如果可能，应避免选项 2，因为将内容添加到 rootScope 并不被视为好的设计。如果您需要将信息存储的时间超过会话时间，则选项 1 很好。所以即使用户关闭了浏览器，数据也会保留在localStorage中。

angular ui-网格保存来自不同范围对象的预填充值

angular ui-grid save prepopulated values from a different scope object

javascript

angularjs

angular-ui-grid

更新：

ui-第 1 部分的网格：

ui-section2 的网格：

会话存储值：