Показать продукты на основе sidemenu Onsen-UI

Я заполнил sidemenu из категорий opencart и главной страницы из продуктов, но я застрял в отображении определенных продуктов, которые попадают под определенную категорию.Показать продукты на основе sidemenu Onsen-UI

i.e, когда я нажимаю меню «ПК», на правой странице следует загружать продукты под «ПК» динамически.

В этом фрагменте я заселен меню, указывающее на статическую странице «page1.html»

<ons-list class="menu-list"> 
<!-- Enter menu items here --> 
<ons-list-item ng-repeat="category in category" class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})"> 
{{category.Category_Name}} 
</ons-list-item> 
</ons-list>

В этом фрагменте я заселен все продукты в этой странице «» page1.html

<li ng-repeat="product in getCurrentPage()"> 
<ul class="cd-item-wrapper"> 
<li class="cd-item-front"><a ng-click="showDetails(product);"><img ng-src="http://localhost/oc/image/{{product.Imageo}}" height=250px width=100% alt="Preview image"></a> 
</li>

Данные JSON (один для продуктов и других для категорий) имеют category_id, связывающие категории и их соответствующие продукты.

здесь мои codepen к моему полному обучению проекта http://codepen.io/ranjith_varadan/pen/LERLpe

любая помощь будет оценена. Спасибо вам, ребята.

ОБНОВЛЕНИЕ 3: Я пытался сделать это с помощью своей программы, но я не знаю, с чего начать, все еще работая над этим. http://plnkr.co/edit/MgltNXw0x2KWcmWm6QeA?p=preview

источник

2014-12-25 Ranjith Varadan

Что есть вы пробовали? Когда пользователь нажимает на категорию, я думаю, она должна загружать продукты, но просто меняет основную страницу. Вы должны загрузить данные и заполнить область. –

, поэтому мне нужно передать идентификатор категории через функцию, которая толкает страницу, которая заполняет продукты на основе идентификатора категории (например, этот http://stackoverflow.com/questions/27577793/push-a-page-dynamically-using -onsenui? noredirect = 1 # comment43620862_27577793). Я сейчас попробую. Спасибо чувак. –

И я могу использовать фильтр angularjs, чтобы показать продукт, верно ?. Исправьте меня, если я ошибаюсь! –

Я узнал, как фильтровать продукты, основанные на идентификатор категории,

В HTML

... 
<li ng-repeat="product in products|categorySelector:categoryID"> 
...

В JS

... 
    module.filter('categorySelector', function(){ 

     return function(products, id){ 

      var returnProduct = [];   
      for (var i=0; i<products.length; i++){ 
       if (products[i].Category_Id == id) { 
        returnProduct.push(products[i]); 
       } 
      } 

      return returnProduct; 
     }; 
    }); 
... 
$scope.showProducts = function(Category_ID) { 
      $scope.categoryID = Category_ID; 
      $scope.slidingMenu.setMainPage('page1.html',{closeMenu:true}); 
     }; 
    ...

увидеть мой новый раздвоенный codepen http://codepen.io/ranjith_varadan/pen/xbEPyj

источник

2014-12-26 09:08:08

Показать продукты на основе sidemenu Onsen-UI

ответ

Смежные вопросы