时间戳

首页 > 解决方案 > JavaScript/Angularjs - 根据 JSON 配置查看模板，多次 ng-repeat

javascript - JavaScript/Angularjs - 根据 JSON 配置查看模板，多次 ng-repeat

问题描述

我有一个 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 ng-repeat

您是否知道如何以更动态的方式处理此问题？

标签： javascriptangularjs

解决方案

您可以创建一个组件来显示一个子项及其子项。对于每个孩子，组件可以使用自己来显示孩子及其孩子。如果有多个嵌套的子层，性能将很快成为问题，但您可以限制设计一种方法来限制显示的级别。这是一个想法，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>

推荐阅读