How to handle conditional sub-category in AngularJS product gallery -
just starting out learning angularjs , decided mock basic product gallery using i've learned far , i've hit roadblock. have simple product gallery 3 templates(category listing, products in category listing , product overview). set sort of conditional, if products in selected category have sub-category, displays list of sub-categories using category-list
template. if don't have sub-category goes straight product-list
template.
i have created plunker showing @ far.
in above example, if clicks on "cars" want show listing of sub-categories using category-list
template. when click "cars" take screen 2 buttons: 4-door
, 2-door
. clicking on 1 of buttons show products sub-categories using product-list
template. however, if click on "trucks" initial screen, take directly product-list
template since trucks don't have sub-categories.
here category-list template:
<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>
and here product-list template:
<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>
see updated plunker
basically, need extend selectcategory
method grouping sub-categories , checking whether we're enter sub-category in subsequent click. this:
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; }) }; }
Comments
Post a Comment