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表。例如，内部跨越计数变量中指定的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 infdig错误。任何人都可以帮我构建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>

需要将分层JSON转换为行显示的html表

1 个答案: