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

Question

我有一个 angular ui 网格，我想显示来自 json 的数据，json 是嵌套的并且有很多我需要的信息到 "carry" 左右，但我只需要网格显示一组选定的 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 但不使用嵌套产品。我添加这个 fiddle 是为了帮助人们理解为什么我不想使用像 $scope.gridOptions.data = grid[0].products;

这样的东西

如果不使用子网格我所做的事情是不可能的，那么请告诉我如何在不循环的情况下将 products.IsSelected 上的属性更改为 True 时保持 json 结构完整等。我需要确保 gridData.Products 仍然指的是原始 gridData... 如果这有意义的话。

Answer 1

测试于 Fiddle。

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: 'ProductCode', name: 'Products.ProductCode', width: '200', displayName: 'PRODUCT CODE'},
        { field: 'ProductName', name: 'Products.ProductName', displayName: 'PRODUCT NAME'}
    ],

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

 $scope.gridOptions.data = gridData[0].Products;
}]);

//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"
}];

这也不会操纵您的 gridData 对象，而只会操纵其中的产品，因为据我了解，您想将其发送回服务器？如果在此之后需要，则需要更清楚地说明这一点。

Answer 2

我做了一些测试，发现即使我正在访问嵌套产品以显示数据并对 json 对象进行更改，嵌套访问知道原始数据，但我不知道有gridData 和 gridData.Products 之间的关系，我认为 gridData.Products 是一个副本，要对 gridData 进行更改，我需要遍历 [=10] 中的每个产品=], 通过 Id 查找特定产品，然后将其 IsSelected 设置为 true.

长话短说，别在意我的问题。

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

How to show nested json in angular UI grid?

javascript

json

angularjs

angular-ui-grid