如何顯示像嵌套在ng-grid中的複雜JSON使用Angular

我有像這樣的JSON，以及如何迭代內部項目，如我明確使用[0]索引，但如果我們有10 20或太多那麼我們該如何處理迭代過程。如何顯示像嵌套在ng-grid中的複雜JSON使用Angular

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

我想要的模板，這樣u可以在圖片的網址看到，但如何從上面的JSON完成實施，在圖像顯示我可以在任何一個創建在例子中，我將非常感激，因爲我從來沒有見過像這樣嵌套的json。

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

我也試過，但沒有得到任何東西，如果有一個人可以讓exampe必須明白它也將幫助他人。

我也試過這樣的東西，但沒有得到任何數據以及如何迭代。

$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>'} 

       ] 
     };

來源

2013-11-27 Wajihurrehman

鏈接無效演示。 – charlietfl

http://plnkr.co/edit/KFPntT?p=preview檢查這個鏈接 – Wajihurrehman

如果這個鏈接沒有工作你，我給你這麼去http://plnkr.co/，這裏你會看到嵌套的json實現使用ng -格 – Wajihurrehman

$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'} 
    ] 
};

來源

2014-06-21 04:24:54

如何顯示像嵌套在ng-grid中的複雜JSON使用Angular

回答

相關問題