Question

想要从嵌套表中重复ng-table和ng行。如何从嵌套的json重复表。例如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
                }
            ]
        }
    }
]
}

需要服务信息作为表标题，实例信息需要作为ng-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>

在angularjs中对ng-table进行ng-repeat。多个动态表

1 个答案: