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

Question

刚开始学习AngularJS，并决定使用我到目前为止所学的知识来模拟一个基本的产品库，但我遇到了一个障碍。目前我有一个简单的产品画廊与3个模板(类别列表，在类别列表中的产品和产品概述)。我想要做的是设置某种条件，如果所选类别中的产品有子类别，它将使用category-list模板显示子类别列表。如果他们没有子类别，它会直接转到product-list模板。

到目前为止，我让created this Plunker显示了我所在的位置。

在上面的例子中，如果有人点击"Cars“，我希望它显示一个使用category-list模板的子类别列表。所以当你点击"Cars“时，它会带你到一个有两个按钮的屏幕：4-door和2-door。然后，单击其中一个按钮将使用product-list模板显示这些子类别中的产品。但是，如果您在初始屏幕中单击" trucks“，则会直接转到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

我建议您的数据模型可以使用一些工作，并将所有产品放在一个单独的数组中，并将类别和子类别作为属性。但是，您可以通过对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>

​

Answer 3

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

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

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