Question

我正在尝试显示选择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>

任何人都可以帮忙吗？

Answer 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}"

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

1 个答案: