如何在AngularJS产品库中处理条件子类别

Question

刚开始学习AngularJS并决定使用迄今为止学到的知识来模拟基本产品库，并且我遇到了障碍。目前，我有一个简单的产品库，包含3个模板（类别列表，产品类别列表和产品概览）。我想要做的是设置某种条件，如果所选类别中的产品具有子类别，则使用category-list模板显示子类别列表。如果他们没有子类别，则直接转到product-list模板。

我有created this Plunker显示我目前在哪里。

在上例中，如果有人点击“汽车”，我希望它使用category-list模板显示子类别列表。所以当你点击“汽车”时，它会带你进入一个带有2个按钮的屏幕：4-door和2-door。点击其中一个按钮，然后使用product-list模板向您显示来自这些子类别的产品。但是，如果您从初始屏幕中点击“卡车”，它将直接带您到product-list模板，因为卡车没有子类别。

这里是我的类别列表模板：

<section id="categories" ng-hide="productsVisible"> 
    <div ng-repeat="product in vm.products" class="category"> 
     <div ng-click="vm.selectCategory(product); showProducts();"> 
      <button>{{product.category}}</button> 
     </div> 
    </div> 
</section> 

这里是我的产品列表模板：

<section id="products" ng-show="productsVisible"> 
    <div ng-repeat="product in vm.selectedCategory.items" class="product"> 
     <a href ng-click="vm.selectProduct(product); showResults();">{{product.name}}</a> 
    </div> 
</section> 

Answer 1

看到我更新plunker

基本上，你需要通过分组子类别和检查我们是否即将在进入这个子类来扩展selectCategory方法随后点击。像这样：

vm.selectCategory = function(category) { 
    var subCats = [], 
     map = {}; 

    if (category.items && !category.items[0].subCategory){ 
    vm.selectedCategory = category; 
    vm.inSubCat = true; 
    return; 
    } 

    vm.inSubCat = !category.items; 
    if (category.items) category.items.forEach(function(e){ 
    if (!map[e.subCategory]) subCats.push({category: e.subCategory, name: category.category}); 
    map[e.subCategory] = true; 
    }); 
    vm.products = subCats; 

    if (vm.inSubCat) vm.selectedCategory = {items: vm.data.filter(function(c){ 
    return c.category == category.name; 
    })[0].items.filter(function(p){ 
    return p.subCategory == category.category; 
    }) }; 
} 

Answer 2

我建议你重构代码有两种可能的方式：

a）尝试从控制器中删除控制视图的行（显示不同指令的过程）并使用指令中的事件

b）使用ng-show和ng-hide指令控制你的视图，这些指令将显示或隐藏你的代码的一部分。

Answer 3

我建议你的数据模型可以使用一些工作，并把所有的产品放在一个单独的数组中，其类别和子类别作为属性。但是，您可以通过对product-list.html进行此更改来获得所需的信息。

<div ng-show="vm.selectedCategory.category=='Cars'"> 
 
<input type="radio" ng-model="subcategory" value="2-Door">Coupe 
 
<input type="radio" ng-model="subcategory" value="4-Door">Sedan 
 
</div> 
 
    
 
<section id="products" ng-show="productsVisible"> 
 
\t <div ng-repeat="product in vm.selectedCategory.items" class="product"> 
 
\t \t <a ng-show="product.subCategory===subcategory" href ng-click="vm.selectProduct(product); showResults();">{{product.name}}</a> 
 
\t </div> 
 
</section>