使用嵌套的JSON对象创建带有ng repeat的表

Question

我想在这个json对象中创建一个表格，表格的标题是service_name，而action_name's是行。

    $scope.aclTest = {
    "1": {
        service_name: 'acl', actions: {
            "1": { action_name: "test11", id: 1 },
            "2": { action_name: "test12", id: 2 },
            "3": { action_name: "test13", id: 3 },
            "4": { action_name: "test14", id: 4 },
            "5": { action_name: "test15", id: 5 }
        }
    },
    "2": {
        service_name: 'gps', actions: {
            "1": { action_name: "test21", id: 1 },
            "2": { action_name: "test22", id: 2 },
            "3": { action_name: "test23", id: 3 }
        }
    },
    "3": {
        service_name: 'sms', actions: {
            "1": { action_name: "test31", id: 1 },
            "2": { action_name: "test32", id: 2 },
            "3": { action_name: "test33", id: 3 },
            "4": { action_name: "test34", id: 4 }
        }
    }
};

我需要这样的事情：

acl                     gps                      sms
-----                   -----                     ----- 
test11                 test21                    test31
test12                 test22                    test32
test13                 test23                    test33
test14                                           test34
test15                                           

如何使用ng repeat执行此操作？

Answer 1

请检查 fiddle demo 。在div中显示此数据要比使用table元素更容易。如果您想使用table元素，则需要重新构建JSON数据。

视图

<div ng-controller="MyCtrl">
  <div ng-repeat="item in aclTest" style="float:left;margin-right:25px;">
     <h3 style="font-weight: bold;font-size: 18px;border-bottom: 1px solid black;">
      {{ item.service_name }}
     </h3> 
    <div ng-repeat="subItem in item.actions">
        {{ subItem.action_name }}
    </div>
  </div>
</div>

AngularJS应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
  $scope.aclTest = {
    "1": {
        service_name: 'acl', actions: {
            "1": { action_name: "test11", id: 1 },
            "2": { action_name: "test12", id: 2 },
            "3": { action_name: "test13", id: 3 },
            "4": { action_name: "test14", id: 4 },
            "5": { action_name: "test15", id: 5 }
        }
    },
    "2": {
        service_name: 'gps', actions: {
            "1": { action_name: "test21", id: 1 },
            "2": { action_name: "test22", id: 2 },
            "3": { action_name: "test23", id: 3 }
        }
    },
    "3": {
        service_name: 'sms', actions: {
            "1": { action_name: "test31", id: 1 },
            "2": { action_name: "test32", id: 2 },
            "3": { action_name: "test33", id: 3 },
            "4": { action_name: "test34", id: 4 }
        }
    }
};
});