创建 Table with ng repeat with nested JSON Object

Question

我想创建一个 table 表单 json object 其中 table 的 headers 是 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 }
        }
    }
};
});

创建 Table with ng repeat with nested JSON Object

Create Table with ng repeat with nested JSON Object

json

html-table

object

angularjs

angularjs-ng-repeat

查看

AngularJS申请