Question

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

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

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

我想要这样的模板，你可以在图片网址中看到但是如何从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'}
    ]
};

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

1 个答案: