Angularjsは、選択したカテゴリに関連する商品のみを表示します。

Question

私はすべての商品をselecte categoryの下に表示しようとしています。 サンプルJSONファイル：

[{ 
"product_id":"1", 
"product_name":"Name of the book 1", 
"product_image":"image Url 1", 
"category_id":"1" 
}, 
{ 
"product_id":"2", 
"product_name":"Name of the book 2", 
"product_image":"image Url 2", 
"category_id":"2" 
}, 
{ 
"product_id":"3", 
"product_name":"Name of the book 3", 
"product_image":"image Url 3", 
"category_id":"3" 


}] 

私は以下のようなコントローラを持っています。私はjsonファイルからデータを読みます。あなたがサンプルで見るように、私はコンソールに実際の製品名を表示することができますが、私はhtmlページに表示することができません。

.controller('CategoryDetailCtrl', function($scope, product,$stateParams) { 
product.fetch().then(function(data) { 
    $scope.dataq=data; 
     for (var i=0; i < $scope.dataq.length; i++){ 
      if ($scope.dataq[i].product_id == $stateParams.categoryId){ 
       $scope.data=data; 
       console.log($scope.data[i].product_name); 
      } 
     } return null; 
}) 


}) 

のHTMLサンプル以下のようなものです：

<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="p in data" type="item-text-wrap"> 
    <h2>{{p.product_name}}</h2>  
    </ion-item> 

誰でも助けてくださいことはできますか？

Answer 1

私はHTML側に

.controller('CategoryDetailCtrl', function($scope, product,$stateParams) { 
product.fetch().then(function(data) { 
    $scope.data=data; 
    $scope.catId=$stateParams.categoryId; 


}) 

および使用されるフィルタ関数のようなコントローラを編集する代わりに使用して問題を解決する場合、コントローラに

ng-repeat="p in data | filter: {category_id: catId}"