嵌套递归角度模板答案

【问题标题】：Nested recursive angular templates嵌套递归角度模板
【发布时间】：2013-11-20 00:38:07
【问题描述】：

从角度开始...

我有嵌套的类别/产品树：

var data = {
               "cats":[{
                   "name":"Cat 1",
                   "cats":[{
                       "name":"Cat 1-1",
                       "cats":[{
                           "name":"Cat 1-1-1",
                           "products":[{
                               "name":"Prod A",
                               "type":"class1"
                           },{
                               "name":"Prod K",
                               "type":"class2"
                           }]
                       },{
                           "name":"Cat 1-1-2",
                           "products":[{
                               "name":"Prod C",
                               "type":"class3"
                           },{
                               "name":"Prod F",
                               "type":"class3"
                           },{
                               "name":"Prod G",
                               "type":"class3"
                           }]
                       }]
                   },{
                       "name":"Cat 1-2",
                       "cats":[{
                           "name":"Cat 1-2-1",
                           "products":[{
                               "name":"Prod G",
                               "type":"class3"
                           }]
                       },{
                           "name":"Cat 1-2-2",
                           "products":[{
                               "name":"Prod J",
                               "type":"class2"
                           },{
                               "name":"Prod L",
                               "type":"class3"
                           }]
                       }]
                   }]
               },{
                  ...
               }]
           }

我需要像这样在嵌套列表中显示它：

<ul>
    <li>Cat 1
    <ul>
        <li>Cat 1-1
        <ul>
            <li>Cat 1-1-1
            <ul>
                <li class="class1">Prod A</li>
                <li class="class2">Prod K</li>
            </ul>
            </li>
            <li>Cat 1-1-2
            <ul>
                <li class="class3">Prod C</li>
                <li class="class3">Prod F</li>
                <li class="class3">Prod G</li>
            </ul>
            </li>
        </ul>
        </li>
        <li>Cat 1-2
        <ul>
            <li>Cat 1-2-1
            <ul>
                <li class="class3">Prod G</li>
            </ul>
            </li>
            <li>Cat 1-2-2
            <ul>
                <li class="class2">Prod J</li>
                <li class="class3">Prod L</li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
    </li>
    <li>
        ...
    </li>
</ul>

目前为止：

<script type="text/ng-template" id="cat-tmpl">
    {{ section.name }}
    <ul>
        <li ng-repeat="cat in cats" ng-include="'cat-tmpl'"></li>
        <li ng-repeat="product in products" ng-include="'product-tmpl'"></li>
    </ul>
</script>

<script type="text/ng-template"  id="product-tmpl">
    {{product.name}}
</script>
<div ng-controller="menuCtrl">
    <ul>
        <li ng-repeat="cat in cats" ng-include="'cat-tmpl'"></li>
        <li ng-repeat="product in products" ng-include="'product-tmpl'"></li>
    </ul>
</div>

和

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

menuApp.controller('menuCtrl', function menuCtrl($scope,$http) {
    $http.get('/ajax/getmenu').success(function(data) {
    $scope.sections = data;
});
});

异步请求获取上面json obj中描述的数据...

然而，这样做的结果是每只猫和产品都被嵌套。例如

<ul>
    <li>Cat 1
    <ul>
        <li>Cat 1-1
        <ul>
            <li>Cat 1-1-1
            <ul>
                <li>Prod A
                <ul>
                    <li>Prod K
                    <ul>
                        <li>Cat 1-1-2
                        ...

这里的任何提示都非常感谢 - 一旦一分钱下降我通常没事 - 它只是不会立即下降。

【问题讨论】：

试试这个jsbin.com/acibiv/3/edit
干杯老兄 - 玩了一下，我想出了如何实现我需要的不同模板 - 你是明星。
@charlietfl，请将其作为答案。太棒了！
@RadimKöhler 我不能相信..它来自这里sporto.github.io/blog/2013/06/24/…
@charlietfl 我明白了。感谢分享。惊人的。谢谢（难以置信我能制作出多么困难的东西……而其他人……）

标签： templates angularjs

【解决方案1】：

这是一个做几乎相同的事情的例子：

http://jsbin.com/hokupe/1/edit

我写了一篇博文，并制作了一个 10-15 分钟的视频来介绍它是如何实现的：

http://gurustop.net/blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree/

示例代码：

  <script type="text/ng-template" id="treeLevel.html">
    <ul>
      <li ng-repeat="item in items">
        <input type="checkbox"
          name="itemSelection"
          ng-model="item._Selected" />
        {{item.text}}
        <div ng-include=" 'treeLevel.html'"
            onload="items = item.children">
        </div>
      </li>
    </ul>
  </script>
  <div ng-include=" 'treeLevel.html' "
       onload="items = sourceItems">
  </div>

【讨论】：