Как использовать область действия ng-repeat внутри другого ng-repeat

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">: Изображение

Где в качестве вывода <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

Вам нужно иметь 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>

Answer 2

Я думаю, это то, что вам нужно:

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

Проверьте рабочую демонстрацию: jsfiddle