2017-09-13 57 views
0

我有以下控制器和视图,并且想要在视图中显示productCategory对象的属性。即使productCategory存在于控制器中,它也不会显示在视图中。AngularJs:即使数据存在于控制器中,视图也不会显示数据

控制器:

angular.module('jordans') 
    .controller('productCategoryCtrl', function ($scope, $rootScope, dataService) { 
     $scope.productCategories = []; 
     $scope.currentData = {}; 
     $scope.productCategory = []; 

     $scope.getCategories = function() { 
      dataService.getProductCategories().then(function (data) { 
       $scope.productCategories = data; 
//     console.log('productCategories = ' + JSON.stringify($scope.productCategories)); 
      }) 
     } 

     $scope.getCategory = function() { 
      $scope.productCategory = dataService.getProductCategory($scope.currentData); 
      console.log('productCategory = ' + JSON.stringify($scope.productCategory)); 
     } 

     $rootScope.$on('setcategory', function (e, args) { 
      console.log('******** ' + new Date()); 

      $scope.currentData.category = args.category; 
      $scope.currentData.type = args.type; 
      console.log('*******productcategory.currentdata = ' + JSON.stringify($scope.currentData)) 
      $scope.getCategory($scope.currentData); 
     }); 

     var init = function() { 
      $scope.getCategories(); 
     }; 

     init(); 

    }) 

查看:

<div ng-controller='productCategoryCtrl' ng-hide="data.error"> 
<div class="col-sm-10"> 
    <img src="..\assets\images\{{productCategory.image[0].name}}"> 
    <p class="categoryheading">{{productCategory.image[0].label}}</p> 
    <div ng-repeat="productImage in productCategory.image"> 
     <div ng-if="$index > 0"> 
      <div class="col-sm-4 typemargin"> 
       <div class="card"> 
        <div class="card-block"> 
         <img src="..\assets\images\{{productCategory.image[i].name}}"> 
        </div> 
        <div class="card-text"> 
         <p><b>{{productCategory.image[$index].label}}</b></p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

回答

2

我觉得你的问题是,产品分类是数组,你在做productCategory.image NG-重复[0]你无法访问它,你可能访问productCategory [0] .image [0]。

你应该循环遍历所有的productCategory数组,然后把你的代码。所以只需要ng-重复整个块,如:

<div class="col-sm-10" ng-repeat="prodCat in productCategory"> 

...然后使用div块内的prodCat代替productCategory。

还只是一个提示,不相关的问题,当你使用console.logs不使用串联与+只需要用逗号,即

console.log('productCategory', $scope.productCategory); 

这样你就不需要jsonstringify你会得到很好的对象,你可以在控制台中进行交互。

另一个可能性是,你只需要productCategory [0] .image,我不知道你的测试对象,所以这只是一个猜测。

相关问题