1

Необходимо вывести объект в таблицу. Объект фиксированной вложенности, пробовал:

  1. Вывести все посредством шаблона, описав все уровни, но натыкаюсь на то что не известны ключи массивов, и новые циклы ng-repeat требуется писать внутри родительских строк
  2. Проблему с родительскими строками решили сделав все на дивах, но нужно на таблицах
  3. Остановились на поиске решения посредством директив

Подскажите куда копать, возможно уже были схожие проблемы

angular.module('demo', [])
    .controller("productsController", function($scope) {
        $scope.products = {
            "100":{
                "out":{
                    "id":1,"title":"Apple_1"
                },
                "return":{
                    "id":2,
                    "title":"Apple_2",
                    "in_sections": {
                        "200":{
                            "id":3,
                            "title":"Apple_3",
                            "param":"Apple_3_Param",
                            "return_sections":{
                                "300":{
                                    "id":4,
                                    "title":"Apple_4",
                                    "param":"Apple_4_Param"
                                }
                            }
                        }
                    }
                }
            }
        };
    })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>

<p>Current</p>

<div ng-app="demo">
    <div ng-controller="productsController">
        <table border="1">
            <tbody ng-repeat="product in products">
                <tr ng-repeat="direction in product">
                    <td>{{ direction.id }}</td>
                    <td>{{ direction.title }}</td>
                    <td>-</td>
                </tr>
                <tr ng-repeat="inSection in product.return.in_sections">
                    <td>{{ inSection.id }}</td>
                    <td>{{ inSection.title }}</td>
                    <td>{{ inSection.param }}</td>
                </tr>
                <!-- HERE IS PROBLEM cant do ng-repeat unknown array key -->
            </tbody>
        </table>
    </div>
</div>

<p>Needed</p>

<table border="1">
    <tdbody>
        <tr>
          <td>1</td>
          <td>Apple_1</td>
          <td>-</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Apple_2</td>
          <td>-</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Apple_3</td>
          <td>Apple_3_Param</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Apple_4</td>
          <td>Apple_4_Param</td>
        </tr>
    </tdbody>
</table>

1 ответ 1

1

Если структура объекта жестко задана, то можно воспользоваться множественной формой директивы ng-repeat: ng-repeat-start, ng-repeat-end

angular.module('demo', [])
  .controller("productsController", function($scope) {
    $scope.products = {
      "100": {
        "out": {
          "id": 1,
          "title": "Apple_1"
        },
        "return": {
          "id": 2,
          "title": "Apple_2",
          "in_sections": {
            "200": {
              "id": 3,
              "title": "Apple_3",
              "param": "Apple_3_Param",
              "return_sections": {
                "300": {
                  "id": 4,
                  "title": "Apple_4",
                  "param": "Apple_4_Param"
                }
              }
            }
          }
        }
      }
    };
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<p>Current</p>

<div ng-app="demo">
  <div ng-controller="productsController">
    <table border="1">
      <tbody ng-repeat="product in products">
        <tr ng-repeat-start="direction in product">
          <td>{{ direction.id }}</td>
          <td>{{ direction.title }}</td>
          <td>-</td>
        </tr>
        <tr ng-repeat-start="inSection in direction.in_sections">
          <td>{{ inSection.id }}</td>
          <td>{{ inSection.title }}</td>
          <td>{{ inSection.param }}</td>
        </tr>
        <tr ng-repeat-end ng-repeat="rsect in inSection.return_sections">
          <td>{{ rsect.id }}</td>
          <td>{{ rsect.title }}</td>
          <td>{{ rsect.param }}</td>
        </tr>
        <tr ng-repeat-end ng-if="false"></tr>
      </tbody>
    </table>
  </div>
</div>

<p>Needed</p>

<table border="1">
  <tdbody>
    <tr>
      <td>1</td>
      <td>Apple_1</td>
      <td>-</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Apple_2</td>
      <td>-</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Apple_3</td>
      <td>Apple_3_Param</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Apple_4</td>
      <td>Apple_4_Param</td>
    </tr>
  </tdbody>
</table>

2
  • Спасибо, для решения данной задачи подходит данный вариант. Хотелось бы ещё найти решение с рекурсией 8 июл 2016 в 6:15
  • @ИванПак, с какой рекурсией?
    – Grundy
    8 июл 2016 в 6:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.