Question

我正在争吵一段时间以及作为一个Angular Noob这让我疯狂。

从我的前端我得到一个像这样的JSON：

{
  "LEVEL1": {
    "LEVEL21": {
      "LEVEL31": {
        "VALUE1": null,
        "LEVEL41": {
          "VALUE2": null,
          "VALUE3": null
        },
        "LEVEL42": {
          "VALUE4": null,
          "VALUE5": null
        }
      },
      "LEVEL32": {
        "VALUE6": null,
        "LEVEL51": {
          "VALUE7": null,
          "VALUE8": null
        }
      }
    },
    "LEVEL22": {
      "VALUE9": null,
      "VALUE10": null,
      "VALUE11": null
    }
  }
}

没有特定的顺序，我没有真正的数字来计算/提取或类似的东西。

我想要实现的是显示某种树，以便显示每个条目（每个条目有一些意图＆＃39;）并带有+符号以打开/显示每个条目的下一个级别 - 但是只有当有下一个级别时（=值isn＆＃t; t null）。

对于没有下一级别的每个条目，我需要点击一下＆＃39;功能，它给我一个完整路径的连接字符串，所以例如类似的东西：

"LEVEL1.LEVEL21.LEVEL42.VALUE5"

到目前为止，我试图通过ng-repeats来解决这个问题，但由于我不知道结构的深度，我不能对它进行硬编码（而且它也是超级的）。

我尝试的下一件事是一些模板指令，但在这里我迷失了，以保持范围最终得到我的完整字符串。

有人对我有一些启发吗？

Answer 1

您可以像这样构建递归ng-repeat：

  <script type="text/ng-template" id="tree_item_renderer.html">

    {{ key }}

    <ul ng-class="{collapse: collapsed, clicky: data !== null}">
      <li ng-repeat="(key, data) in data" 
          ng-include="'tree_item_renderer.html'" 
          ng-init="path = path + (path !== undefined ? '.' : '') + key"
          ng-click="setPath(path); collapsed = !collapsed; $event.stopPropagation();">

      </li>
    </ul>

  </script>

  <li ng-repeat="(key, data) in menuData" 
      ng-include="'tree_item_renderer.html'" 
      ng-click="collapsed = !collapsed; $event.stopPropagation();"></li>

<强>控制器：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.setPath = function(path) {
    alert(path);
  };

  $scope.menuData = {
    "LEVEL1": {
      "LEVEL21": {
        "LEVEL31": {
          "VALUE1": null,
          "LEVEL41": {
            "VALUE2": null,
            "VALUE3": null
          },
          "LEVEL42": {
            "VALUE4": null,
            "VALUE5": null
          }
        },
        "LEVEL32": {
          "VALUE6": null,
          "LEVEL51": {
            "VALUE7": null,
            "VALUE8": null
          }
        }
      },
      "LEVEL22": {
        "VALUE9": null,
        "VALUE10": null,
        "VALUE11": null
      }
    }
  };
});

Here是一个有效的例子。

具有连接字符串的递归模板

1 个答案: