需要将分层JSON转换为行跨HTML表

Question

我有一个像这样的JSON结构

$scope.data = [
        {
            "type":"Internal",
            "count": 3,
            "library" : [
                {
                "type":"Library 123",
                "count": 2,
                "version" : ["1.3","2.3"]
                },
                {
                "type":"Library 1111",
                "count": 1,
                "version" : ["556.3"]
                }

            ]
        },
        {
            "type":"External",
            "count": 3,
            "library" : [
                {
                "type":"Library 09090909",
                "count": 2,
                "version" : ["1.3","2.3"]
                },
                {
                "type":"Library 1212121212",
                "count": 1,
                "version" : ["556.3"]
                }
            ]
        }
    ]

我需要将其转换为html表。 例如，内部扩展为count变量中指定的3行。 我试图在html中做的是

<table>

    <div ng-repeat="row in data">
        {{$root.rowFirst=true;""}}
        <div ng-repeat="lib in row.library" >
            {{$root.libFirst=true;""}}
            <div ng-repeat="ver in lib.version">
                <tr>

                    <td ng-if="$root.rowFirst" rowspan="{{row.count}}">{{row.type}}  {{$root.rowFirst=false;""}}</td>
                    <td ng-if="$root.libFirst" rowspan="{{lib.count}}">{{lib.type}}  {{$root.libFirst=false;""}}</td>
                    <td>{{ver}}</td>
                </tr>
            </div>
        </div>
    </div>

    </table>

但是我遇到了angularjs注入错误。 谁能帮我建立HTML表格。

最终结果应该是这样的

                                  1.3
                  Library 123     2.3   
Internal          Library 1111    556.3


                                  1.3
                  Library 123     2.3   
External          Library 1111    556.3        

Answer 1

我没有在视图（html）中循环，而是在控制器内部进行了迭代，并构建了一个包含我需要的所有信息的新单个数组

    $scope.dataMod = [];
    var newType , newLib, tempObj;

    angular.forEach($scope.data, function(type, key) {
          newType =true ;
          angular.forEach(type.library, function(lib, key) {
            newLib = true;
            angular.forEach(lib.version, function(ver, key) {
                tempObj = {};
                if(newType) {
                    tempObj.typeName = type.type;
                    tempObj.typeCount = type.count;
                    newType=false;
                }
                if(newLib) {
                    tempObj.libName = lib.type;
                    tempObj.libCount = lib.count;
                    newLib=false;
                }
                tempObj.version = ver;
                $scope.dataMod.push(tempObj);

            });

          });
    });

并在html中

    <table border="1" width="100%"  >
        <tr ng-repeat="data in dataMod">
            <td ng-if="data.typeCount" rowspan="{{data.typeCount}}">{{data.typeName}}</td>
            <td ng-if="data.libCount" rowspan="{{data.libCount}}">{{data.libName}} </td>
            <td> {{data.version}}</td>
        </tr>
    </table>