Question

所以我有一个对象数组：

expMonthByCat: 
    {Food: [some values],
     Clothing: [some values]
    }

我有一个看起来像这样的表

<tr data-ng-repeat="category in labels">
    <th scope="row">{{category}}</th>
    <td data-ng-repeat="expCat in expMonthByCat">{{expCat}}</td>
</tr>

我需要在category中传递<td data-ng-repeat="expCat in expMonthByCat">，因为类别包含了我在expMonthByCat中拥有的食物，衣物和其他键。

我尝试过 <td data-ng-repeat="expCat in expMonthByCat.category"> 和 <td data-ng-repeat="expCat in expMonthByCat">{{expCat.category}}</td> 但这不起作用。

有人可以帮我吗？谢谢！

编辑

所以<td data-ng-repeat="expCat in expMonthByCat track by $index">的输出是： Image

<td data-ng-repeat="expCat in expMonthByCat.Food track by $index">{{expCat}}</td>的输出为： Image

如何获取表格以显示其各自的值？

我的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));
                }
            }
        });
    }
}

Answer 1

我认为这是您所需要的：

<tr data-ng-repeat="cat in labels">
    <th scope="row">{{cat}}</th>
    <td data-ng-repeat="expCat in expMonthByCat[cat]">{{expCat}}</td>
</tr>

检查工作演示： jsfiddle

Answer 2

您需要在一个表行上放置ng-repeat才能映射表中的所有标题，然后从那里开始我们需要嵌套ng-repeat来映射属于该类别的所有项目。您可以使用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>

如何在另一个ng-repeat

2 个答案: