AngularJS製品ギャラリーで条件付きサブカテゴリを処理する方法

Question

AngularJSを学び始め、これまでに学んだことを使って基本的な製品ギャラリーをモックアップすることに決めました。現在、私は3つのテンプレート（カテゴリー・リスト、カテゴリー・リスト内の製品および製品概要）を持つシンプルな製品ギャラリーを持っています。私がしたいのは、条件付きの何らかの設定です。選択したカテゴリの製品にサブカテゴリがある場合、category-listテンプレートを使用してサブカテゴリのリストが表示されます。サブカテゴリがない場合は、そのままproduct-listテンプレートに移動します。

私はcreated this Plunkerを持っています。

上記の例では、誰かが「車」をクリックすると、category-listテンプレートを使用してサブカテゴリのリストを表示します。 「車」をクリックすると、4-doorと2-doorの2つのボタンが表示されます。これらのボタンの1つをクリックすると、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

私アドバイスあなたは2つの方法でコードをリファクタリングする：

a）ビューを制御する（異なるディレクティブを表示するプロセス）コントローラーから行を削除し、ディレクティブのイベントを使用するようにしてください。

b）コードの一部を表示または非表示にするng-showおよびng-hideディレクティブを使用して、表示を制御します。

Answer 3

私はあなたのデータモデルがいくつかの仕事を使用し、すべての製品をカテゴリとサブカテゴリを持つ単一の配列にプロパティとして入れることをお勧めします。しかし、この変更によって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"> 
 
\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>