AngularJS ng-repeat-start и ng-repeat-end с таблицей и rowspan

Вопрос или проблема

{
  "1": {
    "Центр": "123 ",
    "пользователь": {
      "1": {
        "userID": "1335",
        "ИмяПользователя": "User1",
        "месяц": {
          "1": "3174.42",
          "2": "3107.75",
          "3": "3183.00",
          "4": "2197.17",
          "5": "2348.83",
          "6": "1917.92",
          "7": "1699.50",
          "8": "430.50"
        }
      },
      "2": {
        "userID": "1336",
        "ИмяПользователя": "User2",
        "месяц": {
          "1": "168.00",
          "2": "160.00",
          "3": "184.00",
          "4": "144.00",
          "5": "144.00",
          "6": "191.50",
          "7": "367.50",
          "8": "1520.25",
          "9": "2028.83",
          "10": "2085.75",
          "11": "2014.08",
          "12": "1144.75"
        }
      }
    }
  },
  "2": {
    "Центр": "124",
    "пользователь": {
      "1": {
        "userID": "1335",
        "ИмяПользователя": "User1",
        "месяц": {
          "1": "2987.58",
          "2": "3121.17",
          "3": "4021.08",
          "4": "2907.50",
          "5": "3663.67",
          "6": "3560.00",
          "7": "3460.83",
          "8": "1283.25"
        }
      },
      "2": {
        "userID": "1336",
        "ИмяПользователя": "User 2",
        "месяц": {
          "6": "25.50",
          "7": "18.50",
          "8": "2722.33",
          "9": "3795.83",
          "10": "3944.83",
          "11": "3907.00",
          "12": "2257.58"
        }
      }
    }
  }
}

Ответ или решение

Для создания динамической таблицы с использованием AngularJS и применением директив ng-repeat-start и ng-repeat-end с учетом динамического rowspan, необходимо правильно понять структуру ваших данных и как они сопоставляются с HTML. Рассмотрим, как реализовать это на основе вашего JSON-объекта.

1. Анализ JSON-данных

Ваша структура данных представляет собой объект, содержащий центры с массивами пользователей. Каждый пользователь имеет свой уникальный идентификатор, имя и массив месяцев с соответствующими значениями.

Пример JSON:

{
  "1": {
    "Center": "123",
    "user": {
      "1": {
        "userID": "1335",
        "UserName": "User1",
        "month": { "1": "3174.42", "2": "3107.75" }
      },
      "2": {
        "userID": "1336",
        "UserName": "User2",
        "month": { "1": "168.00", "2": "160.00" }
      }
    }
  }
}

2. Структурирование таблицы

Используя AngularJS, вам нужно будет использовать ng-repeat-start и ng-repeat-end, чтобы динамически управлять строчными элементами с учетом rowspan. Пример кода для реализации будет следующим:

<table>
  <thead>
    <tr>
      <th>Центр</th>
      <th>Имя пользователя</th>
      <th>Месяц</th>
      <th>Значение</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(centerId, center) in data">
      <td rowspan="{{getRowSpan(center.user)}}">{{center.Center}}</td>
      <td ng-repeat="(userId, user) in center.user" ng-if="$first">{{user.UserName}}</td>
      <td ng-repeat="(monthId, monthValue) in user.month">{{monthId}}</td>
      <td ng-repeat="(monthId, monthValue) in user.month">{{monthValue}}</td>
    </tr>
  </tbody>
</table>

3. Подсчет rowspan

Для правильного отображения этого кода вам нужно написать функцию, которая будет подсчитывать количество строк для каждого центра. Это можно будет реализовать в контроллере AngularJS:

$scope.getRowSpan = function(users) {
  return Object.keys(users).length; // Возвращает количество пользователей для rowspan
};

4. Важные моменты

1. Убедитесь, что ваш JSON имеет правильный синтаксис. В вашем примере у одного из объектов пропущена запятая и неправильный формат.
2. Правильное использование ng-if. Используйте ng-if для ограничения вывода имени пользователя только для первой строки. Это предотвратит его дублирование при создании строк для других месяцев.

Заключение

Следуя представленному плану, вы сможете динамически создавать таблицу с использованием AngularJS и обработать динамические rowspan. Эта реализация обеспечит, что данные будут правильным образом отображаться на основании предоставленного JSON, что сделает вашу таблицу понятной и функциональной. Не забывайте тестировать таблицу на наличие различных сценариев использования данных для полноценной проверки работоспособности.