我在这里问了这个问题:
Working With Dynamic Multidimensional key-value pairs in JSON
但是它变得更加复杂，我无法从这个答案中得到我要去的地方。如果我有一个如下所示的数据对象:
{
"email": "user@someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
如何将其转换为 Angular 菜单？菜单需要列出所有服务，然后如果该服务在“字段”中有关联的项目，则该项目应列在其下方。因此，例如“svc1”及其描述应列在一行上(使其正常工作)，但“Product1”和“Product2”及其描述应出现在接下来的两行中，因为您可以看到“svc1”列在“产品”的“服务”字段。同样，“svc4”应该出现在一行上，然后“Wines”及其描述出现在下一行，因为“svc4”出现在“Wines”的“services”字段中。
我认为最好的方法是在 Angular Controller 中按顺序解压并重新打包这个 JSON 对象，然后将此数据推送到 Angular View ，但可能有一个解决方案仅使用 View 中可用的逻辑。我已经按照这些思路尝试了一堆嵌套的 for 和 if(非常不起作用):
var i, j;
var listArray = [];
for (i = 0; i < $scope.svcs.length; i++) {
var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
listArray.push[littleArray1];
for (j=0; j < $scope.jFA.length; j++) {
if ($scope.jFA[j] == $scope.svcs[i].name) {
if ($scope.jFA[j] == $scope.svcs[i].fields)
littleArray = [$scope.jFA[j].fields] //...etc
}
}
...但是这个逻辑变得越来越密集，无论我现在尝试使用它都不起作用。我喜欢另一个问题的简单答案，但尚未成功复制它。
因此，如果有人可以帮助我弄清楚如何使用 JS 将数据放入正确的序列中，我就可以处理 Angular 部分。或者，如果您是 Angular 高手并且有类似的答案，那就更好了。
最佳答案
所以理解你的问题有点困难，但我尽力了。这个 fiddle 是否显示了您想要实现的目标？ http://jsfiddle.net/arknr6qz/1/
JS:
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.checkService = function(service, fieldServices)
{
if (fieldServices.indexOf(service) != -1) return true;
return false;
};
$scope.data = {
"email": "user@someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
});
HTML:
<div ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="service in data.custom.services">
{{ service.name }}
<div class="indent" ng-repeat="fields in data.custom.fields">
<span ng-if="checkService(service.name, fields.services)">
{{fields.services.values}}
<span ng-repeat="value in fields.values">
{{value.name}} - {{value.desc}}<br>
</span>
</span>
</div>
</div>
</div>
</div>
最后是CSS:
.indent {
margin-left:10px;
}
关于javascript - 将多维 JSON 键值对转换为 Angular 菜单(无需 Angular 知识)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32147503/