sidemenu Onsen-UI를 기준으로 제품 표시

opencart 카테고리의 사이드 메뉴와 제품의 기본 페이지가 채워졌지 만 특정 카테고리에 속하는 특정 제품을 표시하는 데 어려움이 있습니다.sidemenu Onsen-UI를 기준으로 제품 표시

즉 'PC'사이드 메뉴를 클릭하면 오른쪽 페이지가 'PC'아래의 제품을 동적으로로드해야합니다. 이 조각에서

, 내가, 내가 해당 페이지 '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>

에 모든 제품을 채워이 코드에서 정적 페이지 '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>

가리키는 메뉴를 채워

JSON (제품 및 범주 용) 데이터에는 범주와 각 해당 제품을 연결하는 category_id가 있습니다.

여기에 어떤 도움을 주시면 감사하겠습니다 http://codepen.io/ranjith_varadan/pen/LERLpe

내 전체 학습 프로젝트에 내 codepen이다. 고마워.

업데이트 3 : 프로그램에서이 작업을 시도했지만 시작점을 알지 못하고 계속 작업하고 있습니다. HTML에서 내가 카테고리 ID를 기반으로 제품을 필터링하는 방법을 발견 http://plnkr.co/edit/MgltNXw0x2KWcmWm6QeA?p=preview

출처

2014-12-25 Ranjith Varadan

codepen 너 지금까지 해봤 니? 사용자가 카테고리를 클릭하면 제품을로드해야하지만 기본 페이지 만 변경됩니다. 데이터를로드하고 범위를 채워야합니다. –

그래서 카테고리 ID를 기반으로 제품을 채우는 페이지를 푸시하는 함수를 통해 카테고리 ID를 전달해야합니다 (예 : 이처럼 http://stackoverflow.com/questions/27577793/push-a-page-dynamically-using -onsenui? noredirect = 1 # comment43620862_27577793). 나는 지금 그것을 시도 할 것이다. 고마워. –

그리고 나는 angularjs 필터를 사용하여 제품을 보여줄 수 있습니다. 내가 틀렸다면 나를 바로 잡아라! –

는

는 JS에서

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

는

... 
    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}); 
     }; 
    ...

볼 나의 새로운 갈래가 무엇 http://codepen.io/ranjith_varadan/pen/xbEPyj

출처

2014-12-26 09:08:08

sidemenu Onsen-UI를 기준으로 제품 표시

답변

관련 문제