2017-06-08 40 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看到 –