Question

从角度开始...

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

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
                        ...

这里的任何提示都非常感激 - 正常情况下，一旦便士下降，我通常都会好起来 - 它只是不会掉到莫。

Answer 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>

嵌套的递归角度模板

1 个答案: