javascript - 如何使用 Angular 显示嵌套在 ng-grid 中的复杂 json

Question

我有如下所示的 json 以及如何迭代内部项目，例如我明确使用 [0] 索引，但如果我们有 10 20 或太多，那么我们如何处理迭代过程。

还在 plunker 中创建了示例，但没有得到如何迭代而不是静态值。

http://plnkr.co/edit/wnzjFc?p=preview

JSON:

[
  {
    "name": "test",
    "items": [
      {
        "itemName": "sdf",
        "ItemId": "12ad",
      },
      {
        "itemName": "dfs",
        "itemId": "12ad",
      }
    ],
    "qty": "5",
    "_id": "sdfd123"
  },
  {
    "name": "test",
    "items": [
      {
        "itemName": "sdf",
        "ItemId": "12ad",
      },
      {
        "itemName": "dfs",
        "itemId": "12ad",
      }
    ],
    "qty": "5",
    "_id": "sdfd123"
  }
]

我想要这样的模板，你可以在图像 url 中看到，但是如何从上面的 json 完成以实现我在图像中显示的任何人都可以在 plunker 的示例中创建我将非常感激，因为我从未见过仍然嵌套的 json那个。

http://i.imgur.com/e36tC16.png

我也试过这个但没有得到任何东西如果有人可以做出例子必须感谢它也会对其他人有帮助。

我也试过这样的事情，但没有得到任何数据以及如何迭代。

 $rootScope.stores = [];

        $scope.shoppingListGrid = {
            data: 'purchaseItems',
            jqueryUITheme: true,
            columnDefs:
                [
                    {field:'name', displayName:'Store Name'},
                    {field:'items[0].item_id.name', displayName:'Item Name'},
                    {field:'qty', displayName:'Quantity'},
                    {field:'unit', displayName:'Unit'},
                    {field:'', displayName:'', cellTemplate: '<a ng-click="openPurchaseModel(row.entity._id)" id="edit"  data-toggle="tooltip"><i class="icon-plus-sign" ></i>Purchase Item</a>' },
                    {field:'', displayName:'', width:'8%', height:'4%' , cellTemplate: '<a ng-click="openShoppingModal(row.entity._id)" id="edit"  data-toggle="tooltip"><i class="fa fa-pencil fa-fw colorInfo" ></i></a><a ng-click="shopingdelete(row.entity._id)"  id="delete"  data-toggle="tooltip"><i class="icon-trash"></i></a>'}

                ]
        };

Answer 1

$scope.shoppingListGrid = {
    data: 'purchaseItems',
    jqueryUITheme: true,
    columnDefs: [
        {field: 'name', displayName: 'Store Name'},
        {field: 'items[0].item_id.name', displayName: 'Item Name'},
        {field: 'qty', displayName: 'Quantity'},
        {field: 'unit', displayName: 'Unit'},
        {field: '', displayName: '', cellTemplate: '<a ng-click="openPurchaseModel(row.entity._id)" id="edit" data-toggle="tooltip"><i class="icon-plus-sign"></i>Purchase Item</a>'},
        {field: '', displayName:'', width:'8%', height:'4%', cellTemplate: '<a ng-click="openShoppingModal(row.entity._id)" id="edit" data-toggle="tooltip"><i class="fa fa-pencil fa-fw colorInfo"></i></a><a ng-click="shopingdelete(row.entity._id)" id="delete" data-toggle="tooltip"><i class="icon-trash"></i></a>'},
        {field: 'items', displayName: 'items', cellTemplate: '<div data-ng-grid="gridOptions1"></div>'}
    ]
};

$scope.gridOptions1 = {        
    plugins: [new ngGridFlexibleHeightPlugin()],
    data: 'row.getProperty(col.field)',
    columnDefs: [
        {field: 'itemName', displayName: 'itemName'},
        {field: 'itemId', displayName: 'itemId'}
    ]
};