刚刚开始学习 AngularJS 并决定使用我目前学到的知识来模拟一个基本的产品库，但我遇到了障碍。目前我有一个简单的产品库，其中包含 3 个模板（类别列表、类别列表中的产品和产品概述）。我想要做的是设置某种条件，如果所选类别中的产品有子类别，它会使用category-list模板显示子类别列表。如果他们没有子类别，它只会直接进入product-list模板。
我创建了这个 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>
查看我更新的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;
}) };
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句