JavaScript / Angularjs - просмотр шаблона в соответствии с конфигурацией JSON, несколько повторений ng

Question

У меня есть шаблон HTML для отображения в соответствии с конфигурацией, возвращающий конфигурацию JSON

Конфигурация JSON:

[
  {
    label: 'Type of contact',
    children: [
      {
        label: 'Type of prospect',
        children: [
          {
            label: 'Seller'
          },
          {
            label: 'Buyer'
          }
        ]
      }
    ]
  }
]

Чтобы отобразить его, я сделал:

<div ng-repeat="item in $ctrl.filtersConfig">
  <span>{{ item.label }}</span>

  <div ng-repeat="itemChildren in item.children">
    <ul>{{ itemChildren.label }}
      <div ng-repeat="itemChildrenOfChildren in itemChildren.children">
        <li>{{ itemChildrenOfChildren.label }}</li>
      </div>
    </ul>
  </div>

это работает, но проблема в том, что у меня может быть несколько уровней глубины с children, если у меня когда-нибудь будет 10 уровней глубины с children, мне придется сделать 10 нг-повторов

Делаете ли выесть идеи, как справиться с этим более динамичным образом?

Answer 1

Вы можете создать компонент для отображения дочернего элемента и его дочерних элементов.Для каждого дочернего элемента компонент может использовать самого себя для отображения дочернего элемента и его дочерних элементов.Если есть несколько вложенных слоев дочерних элементов, производительность может быстро стать проблемой, но вы можете ограничить разработку способа ограничения отображаемых уровней.Вот идея, которая будет обрабатывать это с одним ng-repeat на ваш взгляд, независимо от количества детей:

Используйте это на верхнем уровне:

<ul>
    <li>
        {{ topLevelObject.label }}
        <ul>
            <li ng-repeat="child in topLevelObject.children">
                <child-display display-object="child"></child-display>
            </li>
        </ul>
    </li>
</ul>

childDisplay.js

angular.module('app') // assumes an app has already been registered
  .component('childDisplay', {
    bindings: {
      displayObject: '<'
    },
    templateUrl: 'childDisplay.html'
  });

childDisplay.html

{{ $ctrl.displayObject.label }}
<ul ng-if="$ctrl.displayObject.children && $ctrl.displayObject.children.length > 0">
  <li ng-repeat="child in $ctrl.displayObject.children">
    <child-display display-object="child"></child-display>
  </li>
</ul>