Search code examples
jsonangularjsmultiple-tablesngtable

ng-repeat on ng-table in angularjs. Multiple Dynamic Tables


Want to repeat an ng-table and ng rows both from a nested table. How to repeat the table from a nested json. for example json may be :

{
"service_info":{
    "service_name":"heading1",
    "sl_id":3,
    "stack":1
},
"instance_info":[
    {
        "instance_id":1,
        "possible_actions":{
            "actions":[
                {
                    "action_name":"modify",
                    "action_id":2
                },
                {
                    "action_name":"deprovision",
                    "action_id":3
                }
            ]
        }
    },
    {
        "instance_id":2,
        "possible_actions":{
            "actions":[
                {
                    "action_name":"modify",
                    "action_id":2
                },
                {
                    "action_name":"deprovision",
                    "action_id":3
                }
            ]
        }
    }
]
},
{
"service_info":{
    "service_name":"heading2",
    "sl_id":3,
    "stack":1
},
"instance_info":[
    {
        "instance_id":1,
        "possible_actions":{
            "actions":[
                {
                    "action_name":"modify",
                    "action_id":2
                },
                {
                    "action_name":"deprovision",
                    "action_id":3
                }
            ]
        }
    },
    {
        "instance_id":2,
        "possible_actions":{
            "actions":[
                {
                    "action_name":"modify",
                    "action_id":2
                },
                {
                    "action_name":"deprovision",
                    "action_id":3
                }
            ]
        }
    }
]
}

need service info as the table heading and instance info as a table row in ng-table. if I use tableparams in it no data is displayed.


Solution

  • After using the trick suggested by @GrumbleSnatch I could get the desired result and here it goes.

    $scope.ilist={
    "service_info":{
        "service_name":"heading1",
        "sl_id":3,
        "stack":1
    },
    "instance_info":[
        {
            "instance_id":1,
            "possible_actions":{
                "actions":[
                    {
                        "action_name":"modify",
                        "action_id":2
                    },
                    {
                        "action_name":"deprovision",
                        "action_id":3
                    }
                ]
            }
        },
        {
            "instance_id":2,
            "possible_actions":{
                "actions":[
                    {
                        "action_name":"modify",
                        "action_id":2
                    },
                    {
                        "action_name":"deprovision",
                        "action_id":3
                    }
                ]
            }
        }
    ]
    },
    {
    "service_info":{
        "service_name":"heading2",
        "sl_id":3,
        "stack":1
    },
    "instance_info":[
        {
            "instance_id":1,
            "possible_actions":{
                "actions":[
                    {
                        "action_name":"modify",
                        "action_id":2
                    },
                    {
                        "action_name":"deprovision",
                        "action_id":3
                    }
                ]
            }
        },
        {
            "instance_id":2,
            "possible_actions":{
                "actions":[
                    {
                        "action_name":"modify",
                        "action_id":2
                    },
                    {
                        "action_name":"deprovision",
                        "action_id":3
                    }
                ]
            }
        }
    ]
    };
    
    $scope.tabledata=[];
    for (var i=0;i< $scope.ilist.length;i++){
    
        $scope.tabledata[i]={};
        var datat=$scope.ilist[i];
        $scope.tabledata[i].tableParams = new ngTableParams({
                    page: 1,           
                    count: 10          
                }, {
                    total: datat.instance_info.length, 
                    getData: function($defer, params) {
                        $scope.displayingItems=datat.instance_info.slice((params.page() - 1) * params.count(), params.page() * params.count()).length;
                        $defer.resolve(datat.instance_info.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });
    }
    

    and Html goes like this:

    <div ng-repeat="instanceList in  ilist track by $index">
        <h3>{{instanceList.service_info.service_name}}</h3>
        <table class="table table-striped table-bordered text-left alignment" class="table" ng-table="tabledata[$index].tableParams" style="margin-top: 20px;">
            <tr ng-repeat="instance in $data">
                <td data-title="'Instance Name'">
                    <a style="cursor: pointer; color: #000000; text-decoration: none;">
                        {{instanceList.service_info.service_name}}_{{instance.instance_id}}
                    </a>
                </td>
            </tr>
        </table>
    </div>