2017-06-08 44 views
0

ProductMenuController我正在通过Id从服务器获取输出。

实施例:

  • 当我通过Id,我得到正确的输出;
  • 当我通过Id作为2时,输出对象$$hashkey丢失,输出不显示。

我已上传的图像,在输出一个$$haskey存在,但在输出2 $$hashkey丢失。

什么和为什么我得到这个错误。

Output 1 and Output2

HTML代码:

<div class="col-md-4 col-sm-4 col-xs-12" ng-repeat="product in ProductMenuCtrl.products | filter: SearchName | filter: priceRange"> 
    <div class="" style="border: 1px solid #d8d8d8;"> 
     <div class=""> 
      <img src="{{product.ProductImage1}}" class="img-responsive" /> 
     </div> 

     <div class="row" style="padding:0.5em"> 
      <div class="col-md-12"> 
       <div> 
        <a ui-sref="index.productDetails({productId:{{product.ProductsId}}})" class="product-name">{{product.ProductName}}</a> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="m-t text-left pull-left"> 
           <a ui-sref="index.productDetails({productId:{{product.ProductsId}}})" class="btn btn-xs btn-outline btn-info">Info <i class="fa fa-info-circle"></i> </a> 
          </div> 
         </div> 
         <div class="col-md-6"> 
          <div class="m-t text-right pull-right"> 
           <span class="label label-danger" style="font-size:1em">MRR: <i class="fa fa-rupee"></i> {{product["MRR"]}}</span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS:

function ProductMenuController($http , $stateParams, $scope) { 
    var pmenu = this; 
    var vm = this; 

    $http({ 
     url: 'xxx/api/Product/ProductBySubCategoryId/getById?', 
     method: 'GET', 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     }, 
     params: { subCategoryId: $stateParams.subCategoryId } 
    }).then(function (response) { 
     pmenu.products = response.data; 
    }); 
} 

JSON输出:显示

[{ 
    "ProductsId": 2013, 
    "ProductName": "Hemodiaz", 
    "ProductDescription": "Introduction ECG300G three channel ECG is such a kind of electrocardiograph .", 
    "MRR": 35000, 
    "ProductImage1": "w", 
    "ProductImage2": null, 
    "ProductImage3": null, 
    "ProductImage4": null, 
    "ProductImage5": null, 
    "BriefProduct": "\tHemodiaz Lifesciences Pvt Ltd.\tModel No:Dr Diaz HDECG300G\tMachine Type:Resting/Diagnostic\tDisplay Type:LCD\tPower Supply:Both\tWarranty In Years:1 Yr\tWarranty Available:Brand Warranty\t12\tDisplay Size(In cm):3.5\tNo. of leads:12\tRechargable Battery:Yes\tSmart Features:Smart Phone intergation", 
    "SubCategorysSubCategorysId": 0, 
    "BrandBrandsId": 0, 
    "Brand": null, 
    "Bubbles": [], 
    "ProductLikes": [], 
    "ProductReviews": [], 
    "SalesOrders": [], 
    "SubCategory": null, 
    "Rooms": [], 
    "Suppliers": [], 
    "BubbleGroupings": [] 
}, { 
    "ProductsId": 2014, 
    "ProductName": "s", 
    "ProductDescription": "s", 
    "MRR": 77, 
    "ProductImage1": "7", 
    "ProductImage2": null, 
    "ProductImage3": null, 
    "ProductImage4": null, 
    "ProductImage5": null, 
    "BriefProduct": "7", 
    "SubCategorysSubCategorysId": 0, 
    "BrandBrandsId": 0, 
    "Brand": null, 
    "Bubbles": [], 
    "ProductLikes": [], 
    "ProductReviews": [], 
    "SalesOrders": [], 
    "SubCategory": null, 
    "Rooms": [], 
    "Suppliers": [], 
    "BubbleGroupings": [] 
}] 

只有第一个产品。

+0

你可以发布你的代码,显示JSON数据? (控制器) – rrd

+0

您确定该请求正在返回网络选项卡中的数据吗? – Icycool

+0

@rrd JSon输出添加,请看看一次。 –

回答

0

嗯,我认为可能是原因是无法呈现视图,但第一个渲染是奇怪的,无论如何只是强制渲染使用$ scope.apply和$ scope.digest强制更新视图。

的解释有点here

不好做,建议您阅读托德座右铭post

如果你需要使用$范围,你可能需要听一个事件或发出一个,或$观看模型更改。基于上述情况,将模型行为再次绑定到Controller中并不是一个好主意。使用Controller作为允许我们注入$ scope的方法,但考虑如何将相同的行为抽象为Factory。 $ scope Object可以被依赖注入到Controller中并在需要时使用。

首先改变这种pmenu.products = response.data;$scope.products = response.data; 所以下面

$scope.$apply(function() { 
      $scope.products = response.data; 
     }); 

包住$scope.products = response.data;这个然后更新您的HTML中使用范围,而不是视图模型

试试吧,让我们看看魔术。希望它适合你

+0

嗨,我改变了pmenu.products = response.data;到$ scope.products = response.data;现在我得到这个错误 - > [$ rootScope:inprog] $ digest已经在进行中 –

+0

改变为$ scope后不再应用,只是直接执行'$ scope.products = response.data;',不用apply function let's看到 –