[英]How to use ng-repeat scope inside another ng-repeat
So I have an array of objects: 所以我有一个对象数组:
expMonthByCat:
{Food: [some values],
Clothing: [some values]
}
I have a table that looks like: 我有一张桌子,看起来像:
<tr data-ng-repeat="category in labels">
<th scope="row">{{category}}</th>
<td data-ng-repeat="expCat in expMonthByCat">{{expCat}}</td>
</tr>
I need to pass category
in <td data-ng-repeat="expCat in expMonthByCat">
because category contains Food, Clothing, and other keys I have inside expMonthByCat. 我需要<td data-ng-repeat="expCat in expMonthByCat">
传递category
,因为类别包含Food,Clothing和我在expMonthByCat中拥有的其他键。
I tried <td data-ng-repeat="expCat in expMonthByCat.category">
and <td data-ng-repeat="expCat in expMonthByCat">{{expCat.category}}</td>
but it doesn't work. 我尝试了<td data-ng-repeat="expCat in expMonthByCat.category">
和<td data-ng-repeat="expCat in expMonthByCat.category">
<td data-ng-repeat="expCat in expMonthByCat">{{expCat.category}}</td>
但是它不起作用。
Can anybody help me out? 有人可以帮我吗? Thanks! 谢谢!
EDIT 编辑
So the output of <td data-ng-repeat="expCat in expMonthByCat track by $index">
is: Image 这样的输出<td data-ng-repeat="expCat in expMonthByCat track by $index">
是: 图像
Where as the output of <td data-ng-repeat="expCat in expMonthByCat.Food track by $index">{{expCat}}</td>
is: Image 其中作为输出<td data-ng-repeat="expCat in expMonthByCat.Food track by $index">{{expCat}}</td>
为: 图像
How can I get the table to display its respective values? 如何获取表格以显示其各自的值?
My JS code: 我的JS代码:
$scope.expMonthByCat = {};
for (z = 0; z < $scope.labels.length; z++) {
$scope.expMonthByCat[$scope.labels[z]] = new Array(12);
for (x = 0; x < 12; x++) {
$scope.expMonthByCat[$scope.labels[z]][x] = 0;
}
}
for (x = 0; x < 12; x++){
for (i = 0; i < response.data[2].length; i++) {
$scope.labels.forEach(function (k) {
if(response.data[2][i].category == k){
if (response.data[2][i].expMonth == x + 1 && response.data[2][i].expYear == currentYear){
var expByCat = response.data[2][i].expAmount;
$scope.expMonthByCat[k][x] = parseFloat(Number(expByCat).toFixed(2));
}
}
});
}
}
You need to have ng-repeat
on one table row to map all the headers in the table then from there we will need nested ng-repeat
to map all the items that belong to that category. 您需要在一个表行上具有ng-repeat
才能映射表中的所有标题,然后从那里开始我们需要嵌套的ng-repeat
来映射属于该类别的所有项目。 You can use data-ng-repeat="(key,val) in labels"
to get the key
of the labels. 您可以data-ng-repeat="(key,val) in labels"
使用data-ng-repeat="(key,val) in labels"
以获取data-ng-repeat="(key,val) in labels"
的key
。
angular.module('notesApp', []) .controller('MainCtrl', ['$scope', function($scope) { $scope.expMonthByCat = { Food: ['cake', 'burger'], Clothing: ['jeans', 't-shirt'] } $scope.labels = Object.keys($scope.expMonthByCat); }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <table border='1' ng-app="notesApp" ng-controller="MainCtrl"> <tr> <th scope="row" data-ng-repeat="category in labels">{{category}}</th> </tr> <tr data-ng-repeat="(key,val) in labels"> <td data-ng-repeat="expCat in expMonthByCat">{{expCat[key]}}</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.