如何在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>