我认为这个问题的独特之处在于我试图遍历包含具有唯一键和数组的对象的数据结构。我已经看到了关于这个主题的其他问题，但它们引用了多个级别相同对象的简单数据结构。
最终，我希望能够通过将其作为对象或数组遍历，从任何给定的数据结构生成表单。
我创建了两个指令，一个用于遍历对象，另一个用于遍历数组。基本上我试图将数组或对象作为参数传入指令的隔离范围，然后通过引用范围变量scope.context生成关联的表单字段。我没有收到任何错误，但我也没有得到预期的结果。
非常感谢任何想法或建议。
HTML
<div ng-app="app" ng-controller="CreateFormController">
<div traverse-object="{{model.form}}"></div>
<script type="text/ng-template" id="traverseObject.tmpl.html">
<div ng-repeat="(key, value) in context">
<div ng-switch="getTypeOf(value)">
<div ng-switch-when="string">
{{key}} string
</div>
<div ng-switch-when="null">
{{key}} null
</div>
<div ng-switch-when="object">
{{key}} object
<div traverseObject = "{{value}}"></div>
</div>
<div ng-switch-when="array">
{{key}} array
<div traverseArray = "{{value}}"></div>
</div>
<div ng-switch-default="true">
{{key}} other
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="traverseArray.tmpl.html">
<div ng-repeat="item in context">
<div ng-switch="getTypeOf(item)">
<div ng-switch-when="string">
{{item}}
</div>
<div ng-switch-when="null">
{{item}}
</div>
<div ng-switch-when="object">
<div traverseObject = "{{item}}"></div
</div>
<div ng-switch-when="array">
<div traverseArray = "{{item}}"></div>
</div>
<div ng-switch-default="true">
{{item}}
</div>
</div>
</div>
</script>
</div>
JS
var json = {
"ProjectName": null,
"ProjectNumber": null,
"BillingAU": null,
"BillingMailCode": null,
"BorrowersName": null,
"Comment": null,
"CompanyNumber": null,
"DesiredDeliveryDate": null,
"LendingGroup": "",
"LendingOffice": null,
"LoanAmount": null,
"LoanAmountOther": null,
"LoanCloseDate": null,
"LoanNumber": null,
"LoanTerm": null,
"Obligor": null,
"OriginatingAU": null,
"PreviousProjectNumber": null,
"PreviousReport": null,
"TransactionComments": null,
"IsInvolvement": null,
"InvolvementType": "",
"IsFFESecured": null,
"IsJuniorLien": null,
"IsParticipationLoan": null,
"IsWithCrossCollateral": null,
"IsWithLoanGuarantor": null,
"TotalParticipationLoanAmount": null,
"LienPosition": null,
"LoanExist": "",
"LoanType": "",
"OtherLien": null,
"PriorityApproval": "",
"ProjectPurpose": "",
"LoanTransType": "",
"ServiceRequestPeople": [
{
"PersonType": "Account Officer",
"FirstName": null,
"LastName": null,
"Email": null,
"Company": null,
"CompanyNumber": null,
"ImportUserId": null,
"PhoneNumber": "",
"OtherNumber": "",
"FaxNumber": "",
"Address": {
"StreetAddress": "",
"StreetAddress2": "",
"City": "",
"State": "",
"ZipCode": "",
"County": "",
"Nation": "United States",
"Links": []
},
"Links": []
}
],
"Properties": [
{
"DevelopmentName": null,
"PropertyTypesMajor": "",
"PropertyTypes": "",
"PropertyAddress": {
"StreetAddress": "",
"StreetAddress2": "",
"City": "",
"State": "",
"ZipCode": "",
"County": "",
"Nation": "United States",
"Links": []
},
"PropertyDescription": null,
"PropertyCondition": "",
"PropertyRemark": null,
"PropertyStatus": "",
"PropertyTenancy": "",
"ExternalReferenceNumber": null,
"FhaCaseNumber": null,
"LegalComment": null,
"NumberOfBuildings": null,
"NumberOfTenants": null,
"NumberOfUnits": null,
"Occupancy": null,
"PriorSaleDate": "",
"PriorSalePurchaseAmount": null,
"TotalPurchaseAmount": null,
"ProposedUse": null,
"CurrentUse": null,
"Stories": null,
"YearBuilt": null,
"YearLastRenovate": null,
"RentableArea": null,
"Zoning": null,
"ZoningCodeDescription": null,
"MapNumber": null,
"IsForSale": null,
"ListSaleAmount": null,
"IsLegalDescription": null,
"IsPendingSale": null,
"PendingSaleAmount": null,
"PendingSaleDate": "",
"IsRenovationDemo": null,
"RenovationDemoDescription": null,
"IsFloodPlain": null,
"FloodPlainDescription": null,
"FloodPlainSurveyed": null,
"IsGroundLease": null,
"ParkingType": [
""
],
"PrimaryImprovement": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"SecondaryImprovement": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"LandSize": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"ExcessLandSize": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"PropertyParcel": [
{
"ParcelNumber": null,
"Size": 0,
"Links": []
}
],
"PropertyPeople": [
{
"PersonType": "",
"FirstName": null,
"LastName": null,
"Email": null,
"PhoneNumber": "",
"OtherNumber": "",
"FaxNumber": "",
"Affiliation": null,
"Links": []
}
],
"Services": [
{
"ServiceType": null,
"Comments": null,
"SentDate": "",
"DesiredDeliveryDate": "",
"Links": []
}
],
"Links": []
}
],
"Links": []
}
var app = angular.module('app', [])
app.controller('CreateFormController', function($scope){
$scope.model = {}
$scope.model.form = json
})
app.directive("traverseObject", function(){
return {
scope: {
traverseObject: '@'
},
templateUrl: 'traverseObject.tmpl.html',
link: function(scope){
scope.getTypeOf = function(value){
if(value === null) {
return "null";
}
if(Array.isArray(value)) {
return "array";
}
return typeof value;
}
scope.context = JSON.parse(scope.traverseObject)
}
}
})
app.directive("traverseArray", function(){
return {
scope: {
traverseArray: '@'
},
templateUrl: 'traverseArray.tmpl.html',
link: function(scope){
scope.getTypeOf = function(value){
if(value === null) {
return "null";
}
if(Array.isArray(value)) {
return "array";
}
return typeof value;
}
scope.context = JSON.parse(scope.traverseArray)
}
}
})