Question

我有一个角度ui网格，我想显示来自json的数据，json是嵌套的，并且有很多我需要“携带”的信息，但我只需要网格来显示一组选定的json属性，我知道我可以将json.Products放入网格中，但我宁愿不这样做。

HTML：

<div ng-app="exampleApp">
    <section style="width:75%; margin-left:auto; margin-right:auto;" ng-controller="GridController">
    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </section>
</div>

JS：

var exampleApp = angular.module('exampleApp', ['ui.grid']);

//this would be a products grid, users would select product and add them to  a cart, the IsSelected property would be set to true.
exampleApp.controller('GridController', ['$scope', function ($scope) {
    $scope.gridOptions = {
        paginationPageSizes: [15, 25, 50, 75],
        paginationPageSize: 15,
        enableSorting: true,
        showGridFooter: true,
        columnDefs: [
            { field: 'Products.ProductCode', name: 'Products.ProductCode', width: '200', displayName: 'PRODUCT CODE'},
            { field: 'Products.ProductName', name: 'Products.ProductName', displayName: 'PRODUCT NAME'}
        ],

        onRegisterApi: function(gridApi) {
                $scope.gridApi = gridApi;
        }
    };

  var sResult = JSON.stringify(gridData);
  var parsedResult = JSON.parse(sResult);
  $scope.AllProductData = parsedResult;
  $scope.productData = parsedResult.Products;
  $scope.gridOptions.data = $scope.AllProductData;
  console.log("AllProductData: " + JSON.stringify($scope.AllProductData));
}]);

//user would change quantity and maybe some other properties for items in their cart and then checkout which sends all data back to server.
/*
I dont want to do something like:
$scope.gridOptions.data: gridData.Products;
because I need to send all the data back to server that I recieved in my ajax call.
I'd like to have the grid just get what it needs from the json.
*/

var gridData = [{
    "Products": [{
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Green",
        "QuantityAvailable": null,
        "ProductName": "10 Pin Connector, Digital Board",
        "ProductId": "01td0000001skXZAAY",
        "ProductCode": "7149",
        "PricebookEntryId": "01ud0000005tOgzAAE",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }, {
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Green",
        "QuantityAvailable": null,
        "ProductName": "10 Prepaid worm",
        "ProductId": "01td0000001sks9AAA",
        "ProductCode": "805514-PPD",
        "PricebookEntryId": "01ud0000005tLZHAA2",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }, {
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Red",
        "QuantityAvailable": 0,
        "ProductName": "10x1 ITALIAN DIAGNOSTIC KIT",
        "ProductId": "01td0000001sl03AAA",
        "ProductCode": "902232-ITA",
        "PricebookEntryId": "01ud0000005tP99AAE",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }, {
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Red",
        "QuantityAvailable": 0,
        "ProductName": "10x1 SPAIN DIAGNOSTIC KIT",
        "ProductId": "01td0000001sl0KAAQ",
        "ProductCode": "902232-SPN",
        "PricebookEntryId": "01ud0000005tPENAA2",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }],
    "CustomerId": "006q0000007KyVnAAK",
    "AccountId": "1035620"
}];

请参阅FIDDLE

请参阅Updated Fiddle显示该网格使用的是帐户ID，但未使用嵌套产品。我添加了这个小提琴，以帮助人们理解为什么我不想使用像$scope.gridOptions.data = grid[0].products;

这样的东西

如果不使用subgrids我不能做什么，请告诉我如何在更改products.IsSelected为True而不循环等属性时保持json结构完整。我需要确保gridData.Products仍然引用原始的gridData ......如果这是有道理的。

Answer 1

在小提琴上测试。

SocketAsyncEventArgs.BufferList

这也不会操纵你的gridData对象而只是内部的产品，因为根据我的理解你想将它发送回服务器？如果在此之后需要，则需要更加清晰。

Answer 2

我做了一些测试，发现即使我访问嵌套产品来显示数据并对json对象进行更改，嵌套访问也知道原始数据，我不知道{{1}之间存在关系和gridData，我认为gridData.Products是副本并且对gridData.Products进行更改我需要遍历gridData中的每个产品，找到具体的按Id生成产品，然后将其gridData设置为true。

这么长的故事简短，别担心我的问题。

如何在角度UI网格中显示嵌套的json？

2 个答案: