[英]AngularJS: ng-repeat using an array field of an array of objects
I have a json structure: 我有一个json结构:
let total_price = "£100";
let product_groups = [
{
"name": "group 1",
"summary": "group 1 summary",
"products": [
{
"name": "product 1",
"price": "£10",
...
},
...
]
},
...
]
I am trying to flatten this and display it using a table in the following form 我试图压扁它并使用下表中的表格显示它
<table class="table">
<thead>
<tr>
<th>Group Name</tr>
<th>Product Name</tr>
<th>Product Price</tr>
</tr>
</thead>
<tbody>
<tr ng-repeat="group in product_groups">
<td>{{group.name}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}<td>
</tr>
<tr>
<th colspan="2">Total</th>
<td>{{total_price}}</td>
</tr>
</tbody>
</table>
But this obviously doesnt give me access to each product. 但这显然不能让我访问每个产品。 Is there a way I can do this using an ng-repeat
? 有没有办法可以使用ng-repeat
来做到这一点? Or will I need to flatten my data structure first in the controller? 或者我是否需要首先在控制器中展平我的数据结构?
You can use nested ng-repeat' and use
ng-repeat-start and
ng-repeat-end` try the following. 您可以使用嵌套的ng-repeat' and use
ng-repeat-start and
ng-repeat-end`尝试以下操作。
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.product_groups = [ { "name": "group 1", "summary": "group 1 summary", "products": [ { "name": "product 1", "price": "£10", }, { "name": "product 1", "price": "£10", }, ] }, { "name": "group 2", "summary": "group 2 summary", "products": [ { "name": "product 21", "price": "£20", }, { "name": "product 15", "price": "£80", }, ] } ]; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="plunker"> <div ng-controller="MainCtrl"> <table class="table"> <thead> <tr> <th>Group Name</th> <th>Product Name</th> <th>Product Price</th> </tr> </thead> <tbody> <tr ng-repeat-start="group in product_groups"></tr> <tr ng-repeat="product in group.products"> <td>{{group.name}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr> <tr ng-repeat-end></tr> </tbody> </table> </div> </body>
Hi try below solution 嗨尝试以下解决方案
$scope.newArray = [];
let product_groups = [
{
"name": "group 1",
"summary": "group 1 summary",
"products": [
{
"name": "product 1",
"price": "£10",
},
]
},
];
for(var i = 0; i< product_groups.length; i++) {
for(var j =0; j< product_groups[i].products.length; j++) {
var flattenProduct = {
gname:product_groups[i].name,
name:product_groups[i].products[j].name,
price : product_groups[i].products[j].price
};
$scope.newArray.push(flattenProduct );
}
}
And Then call in html like below: 然后调用html如下:
<table class="table">
<thead>
<tr>
<th>Group Name</tr>
<th>Product Name</tr>
<th>Product Price</tr>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in newArray">
<td>{{p.gname}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}<td>
</tr>
</tbody>
</table>
You should flatten your JSON. 你应该弄平你的JSON。 I suggest changing your structure from: 我建议改变你的结构:
product_groups = [{
"name": "group 1",
"summary": "group 1 summary",
"products": [{
"name": "product 1",
"price": "£10"
},
{
"name": "product 2",
"price": "£20"
}
]
}]
to: 至:
product_groups = [{
"name": "group 1",
"summary": "group 1 summary",
"product": {
"name": "product 1",
"price": "£10"
}
},
{
"name": "group 1",
"summary": "group 1 summary",
"product": {
"name": "product 2",
"price": "£20"
}
}
]
Then you can simply use this example: 然后你可以简单地使用这个例子:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.product_groups = [{ "name": "group 1", "summary": "group 1 summary", "product": { "name": "product 1", "price": "£10", } }, { "name": "group 1", "summary": "group 1 summary", "product": { "name": "product 2", "price": "£20", } } ] });
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <table class="table"> <thead> <tr> <th>Group Name</th> <th>Product Name</th> <th>Product Price</th> </tr> </thead> <tbody> <tr ng-repeat="group in product_groups"> <td>{{group.name}}</td> <td>{{group.product.name}}</td> <td>{{group.product.price}} <td> </tr> </tbody> </table> </div> </body> </html>
在现有的ng-repeat中使用新的ng-repeat,就像嵌套循环一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.