Javascript 角度-从JSON生成嵌套列表_Javascript_Json_Angularjs_Angularjs Ng Repeat

Javascript 角度-从JSON生成嵌套列表

javascript json angularjs

Javascript 角度-从JSON生成嵌套列表,javascript,json,angularjs,angularjs-ng-repeat,Javascript,Json,Angularjs,Angularjs Ng Repeat,我想在嵌套列表中显示一组JSON数据： JSON的格式如下： ["Item 1", "Item 2", "Item 3", ["Nested Item 1", "Nested Item 2"]] html应为： <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li> <ul> <li&g

我想在嵌套列表中显示一组JSON数据：

JSON的格式如下：

["Item 1", "Item 2", "Item 3", ["Nested Item 1", "Nested Item 2"]]

html应为：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>
    <ul>
      <li>Nested Item 1</li>
      <li>Nested Item 2</li>
    </ul>
  </li>
</ul>

我并没有对JSON的控制权，它的深度可能超过两个级别

当然，我试过：

<ul>
  <li ng-repeat="item in data">{{item}}</li>
</ul>

但它不起作用，因为对于嵌套项，它只显示json

如何在AngularJs中实现嵌套列表

小提琴手：

看看这个漂亮的玩具，它在最后有一个完整的例子。简而言之，您需要构建嵌套指令，其中内部指令将递归调用外部指令：

<body>
    <div ng-controller="IndexCtrl">
        <collection collection='tasks'></collection>
    </div>
</body>

angular.module('APP', [])
.directive('collection', function () {
    return {
        ...
        template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
    }
})
.directive('member', function ($compile) {
    return {
        ...
        template: "<li>{{member.name}}</li>",
        link: function (scope, element, attrs) {
            if (angular.isArray(scope.member.children)) {
                element.append("<collection collection='member.children'></collection>"); 
                $compile(element.contents())(scope)
            }
        }
    }

多亏了zsong和Blackhole，我找到了一个解决方案

生成的HTML：

<div ng-app="testApp">
    <div ng-controller="TestCtrl">
    <script type="text/ng-template" id="/nestedList.html">
        <ul>
            <li ng-repeat="item in data">
                <div ng-switch="isString( item )">
                    <div ng-switch-when="true">{{item}}</div>
                    <div ng-switch-when="false">
                        <!-- Recursive template!! -->
                        <div ng-include="'/nestedList.html'" ng-init="data = item">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </script>
    <div ng-include="'/nestedList.html'"></div>
    </div>
</div>

递归指令。@Blackhole你能解释一下它是如何工作的，或者提供一些文档吗？由zsong链接的问题给出了一个想法，但如果你想更进一步，Google会帮助你。@Blackhole谢谢，它帮助我回答了我自己的问题。是否应将其作为副本关闭？

$scope.isString = function (item) {
    return typeof item === "string";
};