如何处理 AngularJS 产品库中的条件子类别答案

【问题标题】：How to handle conditional sub-category in AngularJS product gallery如何处理 AngularJS 产品库中的条件子类别
【发布时间】：2023-04-06 10:25:01
【问题描述】：

刚开始学习 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>

【问题讨论】：

标签： angularjs

【解决方案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;
  }) };
}

【讨论】：

【解决方案2】：

我建议您的数据模型可以使用一些工作，并将所有产品放在一个数组中，并将类别和子类别作为属性。但是，您可以通过对 products-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">
	<div ng-repeat="product in vm.selectedCategory.items" class="product">
		<a ng-show="product.subCategory===subcategory" href ng-click="vm.selectProduct(product); showResults();">{{product.name}}</a>
	</div>
</section>

【讨论】：

【解决方案3】：

我建议您以两种可能的方式重构代码：

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

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

【讨论】：