Angularjs，仅显示与所选类别相关的产品答案

【问题标题】：Angularjs , display only products what relate with selected categoryAngularjs，仅显示与所选类别相关的产品
【发布时间】：2016-04-14 13:04:24
【问题描述】：

我正在尝试显示所选 categoryId 下的所有产品。示例 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>

有人可以帮忙吗？

【问题讨论】：

$scope.data=data;这部分是错误的。我只需要用 i 分配匹配数组的值，但我不知道如何。

标签： angularjs json jstree android-tabs

【解决方案1】：

我通过编辑控制器解决了问题

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


})

并在html端使用过滤功能而不是在控制器中使用if

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

【讨论】：