ng-repeat 在 ng-table 上 angularjs。多个动态表

Question

想要重复嵌套 table 中的 ng-table 和 ng 行。如何从嵌套的 json 中重复 table。例如 json 可能是：

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

需要服务信息作为 table 标题和实例信息作为 ng-table 中的 table 行。如果我在其中使用 tableparams，则不会显示任何数据。

Answer 1

在使用@GrumbleSnatch 建议的技巧后，我可以得到想要的结果，这就是它。

$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()));
                }
            });
}

和Html是这样的：

<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>

ng-repeat 在 ng-table 上 angularjs。多个动态表

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

json

multiple-tables

angularjs

ngtable