angular js中的迭代
angular js中的迭代
提问于 2018-05-31 03:13:11
我正在使用python flask开发angular js，我面临着在一个场景中迭代JSON的挑战。场景如下: JSON为：
{
"categories": ["ladies", "men", "kids", "home", "sale", "life"],
"home": [{
"categories": "New Arrivals",
"categoryTitle": "home"
}],
"kids": [{
"categories": "New Arrivals",
"categoryTitle": "Baby"
}],
"men": [...multiple nodes...],
"ladies": [...multiple nodes...]
}我想打印类别json中的数据，例如kids.categoryTitle，但我的类别名称来自同一json中的类别列表。
我想要打印的是：
<div ng-repeat="catName in ctrl.tableData.cats"><tr data-ng-repeat="(key, data) in ctrl.tableData.catName"></tr></div>但是上面的代码不能正常工作，就像我使用ctrl.tableData.kids1 instead ofctrl.tableData.catName1一样。
谢谢你的帮忙
回答 1
Stack Overflow用户
发布于 2018-05-31 03:32:26
这是您数据的一个工作示例，它从对象中读取类别名称，然后加载键的数据并循环它们
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.data = {
categories: ["ladies", "men", "kids", "home", "sale", "life"],
home: [{
categories: "New Arrivals",
categoryTitle: "home"
}],
kids: [{
categories: "New Arrivals",
categoryTitle: "Baby"
}]
};
});<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="d in data.categories">
Category: {{d}}
<br>
Data:
<li data-ng-repeat="k in data[d]">
{{k}}
</li>
<hr>
</ul>
</body>
</html>
!请勿将tr标记放入div标记中
另外，您的JSON没有cats数据。
更新
从您的数据创建多个表
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.data = {
categories: ["kids", "home"],
home: [{
categories: "home 1.1",
categoryTitle: " home1.2"
}, {
categories: "home 2.1",
categoryTitle: "home 2.2"
}, {
categories: "home 3.1",
categoryTitle: "home 3.2"
}, {
categories: "home 4.1",
categoryTitle: "home 4.2"
}, {
categories: "home 5.1",
categoryTitle: "home 5.2"
}],
kids: [{
categories: "kids 1.1",
categoryTitle: "kids 1.2"
}]
};
$scope.getKeys = function(obj) {
if (!$scope.data.hasOwnProperty(obj)) {
return [];
}
return Object.keys($scope.data[obj][0]);
}
});td {
border: 1px solid black;
}<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<table ng-repeat="d in data.categories">
<tr>
<th ng-repeat="l in x = getKeys(d)" ng-if="l!= '$$hashKey'">
{{l}}
</th>
</tr>
<tr ng-repeat="k in data[d]">
<td>{{k.categories}}</td>
<td>{{k.categoryTitle}}</td>
</tr>
</table>
</body>
</html>
更新2
使用具有多个tbody的表
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.data = {
categories: ["kids", "home"],
home: [{
categories: "home 1.1",
categoryTitle: " home1.2"
},
{
categories: "home 2.1",
categoryTitle: "home 2.2"
},
{
categories: "home 3.1",
categoryTitle: "home 3.2"
},
{
categories: "home 4.1",
categoryTitle: "home 4.2"
},
{
categories: "home 5.1",
categoryTitle: "home 5.2"
}
],
kids: [{
categories: "kids 1.1",
categoryTitle: "kids 1.2"
}]
};
$scope.getKeys = function(obj) {
if (!$scope.data.hasOwnProperty(obj)) {
return [];
}
return Object.keys($scope.data[obj][0]);
};
});td {
border: 1px solid black;
}<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tbody ng-repeat="d in data.categories">
<tr>
<th ng-repeat="l in x = getKeys(d)" ng-if="l!= '$$hashKey'">
{{l}}
</th>
</tr>
<tr ng-repeat="k in data[d]">
<td>{{k.categories}}</td>
<td>{{k.categoryTitle}}</td>
</tr>
</tbody>
</table>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50611934
复制相关文章
相似问题
腾讯云开发者
