angularjs - 如何在 Angularjs 中将 JSON 响应正确解析为 ng-repeat

Question

我希望能够使用 ng-repeat为了解析我在前端的响应。我在使用 ng-repeat 解析具有多个项目与单个项目的响应时遇到问题列表。

我能够解析；但我必须用单独的 ng-repeat 创建 2 个不同的列表在前端配置并添加一些丑陋的逻辑，如果数组的长度大于 1，则不显示。

我的目标是只有一个 ng-repeat元素在我的部分中，它可以处理响应或处理此要求的更好方法。

详细说明和下面的jsfiddle。
我想对这两个 JSON 响应使用这个 ng-repeat 设置。

    <ul ng:repeat="report in reportConfigured.Reports">
    <li ng:repeat="reportItem in report">{{reportItem.ReportName.$}}</li>
    </ul>

以下是当有多个报告时我从我的网络服务中得到的响应。

{
    "Reports": {
        "@xmlns": {
            "$": "http:\/\/ws.wso2.org\/dataservice"
        },
            "Report": [{
            "ReportID": {
                "$": "20"
            },
                "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Results"
            },
                "VisibleToPartner": {
                "$": "false"
            },
                "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Report"
            },
                "TemplateID": {
                "$": "9"
            }
        }, {
            "ReportID": {
                "$": "163"
            },
                "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Scheduled Candidates with Test Center"
            },
                "VisibleToPartner": {
                "$": "false"
            },
                "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Report"
            },
                "TemplateID": {
                "$": "220"
            }
        }, {
            "ReportID": {
                "$": "212"
            },
                "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Survey Report by Test"
            },
                "VisibleToPartner": {
                "$": "false"
            },
                "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Report"
            },
                "TemplateID": {
                "$": "269"
            }
        }]
    }
};

当只有一份报告时，我会从我的服务中收到此回复

 {
    "Reports": {
        "@xmlns": {
            "$": "http:\/\/ws.wso2.org\/dataservice"
        },
        "Report": {
            "ReportID": {
                "$": "212"
            },
            "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                "$": "Survey Report by Test"
            },
            "VisibleToPartner": {
                "$": "true"
            },
            "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                "$": "Examination Report"
            },
            "TemplateID": {
                "$": "269"
            }
        }
    }
}

我希望能够用相同的 ng-repeat 解析两个响应.我附上了一个 jsfiddle 以获取更多详细信息。

http://jsfiddle.net/cejohnson/mdec9/1/

Answer 1

在将它设置为 ng-repeat 之前，我会转换您从服务器获得的内容数据源:

$http({...})
.success(function(data){
    if ( angular.isArray(data.Reports.Report) ) {
        $scope.reports = data.Reports.Report;
    }
    else {
        $scope.reports = [data.Reports.Report];
    }
});

进而

<ul ng:repeat="report in reports">
    <li ng:repeat="reportItem in report">{{reportItem.ReportName.$}}</li>
</ul>