Naresh Ghanate Naresh Ghanate - 6 days ago 5
AngularJS Question

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.

Answer

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>