javascript - AngularJS 中的类别树使用递归模板无法正确显示

Question

我正在使用 AngularJs 和 Bootstrap，我想根据类别以分组形式显示不同种类的 Wine ，我想以缩略图的形式进行，为此我使用 Bootstrap 类“thumbnail”并在里面“caption”，显示酒的数据。我遇到的问题是我不知道，因为它在类别名称后显示了一个空缩略图。我不能让我展示不同的品种，而不是在上一个品种 Wine 之后。

我的 HTML:

<div class="container" ng-app="app" ng-controller='ctrl'>

  <script type="text/ng-template" id="categoryTree">

        <h3>{{ category.category_name }}</h3>

        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img ng-src="{{ category.photo }}">
            <div class="caption">
                <h3>{{ category.name }}</h3>
                <h4>{{ category.bodega }}</h4>
                <p>{{ category.variedad }}</p>
                <p>{{ category.price | currency }}</p>  
            </div>
            </div>
        </div>


        <div ng-if="category.subcategories">

            <div ng-repeat="category in category.subcategories" ng-include="'categoryTree'">           
            </div>

        </div>

    </script>



    <div ng-repeat="category in categories" ng-include="'categoryTree'"></div>

</div>

我的JS:

angular.module("app", []).
controller("ctrl", ['$scope', function ($scope) {       
    $scope.categories =[
    {    
    "category_name":"Tintos",
    "subcategories":
    [
       {
          "id": 1,
          "parentId": 1,
          "name": "El Enemigo",
          "variedad": "Cabernet Sauvignon",
          "bodega": "Catena Zapata",
          "price":"13.75",
          "photo":"http://www.sietespirits.com/product_images/g/598/El_enemigo_Malbec__72225_zoom.jpg?id=1"
        }, 
        {
          "id": 2,
          "parentId": 1,
          "name": "Altas Cumbres",
          "variedad": "Malbec",
          "bodega": "Lagarde",
          "price":"82",
          "photo":"http://www.lagarde.com.ar/uploads/wines/altascumbres.png"
        }
    ]
    },
    {
    "category_name":"Blancos",
    "subcategories":[{
          "id": 5,
          "name": "El Zorzal",
          "variedad": "Chardonnay",
          "bodega": "Zorzal",
          "price":"13.75",
          "photo":"http://tonelprivado.vteximg.com.br/arquivos/ids/163090-1000-1000/Finca-El-Zorzal-.-Chardonnay-.-750-ml.300424.jpg"
    }]
  }

]

}
])

我留给你一个 fiddle JSFiddle

非常感谢您阅读我的内容。

Answer 1

当子类别具有与父类别相同的属性名称以创建通用模板时，递归模板可以很好地工作。此处父子数据结构不同。

无论如何，子类别有一个 id 属性，而父类别没有，您可以有条件地检查它并隐藏默认缩略图。

<div class="col-sm-6 col-md-4" ng-if="category.id">
  <div class="thumbnail">
     .....
  </div>
</div>

Working Demo with ng-include

如果您拥有的数据结构是具有不同属性名称的对象，我建议使用嵌套 ng-repeat 为子类别创建额外的范围。

将来，如果您决定为父类别添加一个 id 属性，上述 fiddle 将不会按预期工作。请参阅下面的 fiddle 。

Working demo with nested ng-repeat