Angular对象中没有$$ hashkey

Question

In ProductMenuController I am passing Id to get output from the server.

Example:

• When I pass Id , I am getting proper output;
• When I pass Id as 2, in output object $$hashkey is missing and output is not displaying.

I have uploaded the image, in Output one $$haskey is present, but in Output 2 $$hashkey is missing .

What and why I am getting this error.

HTML Code:

<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 output :

[{
    "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": []
}]

Only the first product is displayed.

Answer 1

hmmm what i think might be the cause is unable to render the view but the first one rendered which is weird, anyway just force the rendering using $scope.apply and $scope.digest to enforce update on the view.

A bit of explanation here

Bad to do, recommend you read Todd Motto post

If you need to use $scope, you'll likely need to listen to an event or emit one, or $watch for Model changes. Based on the above, this isn't a good idea to tie Model behaviour into the Controller again. Using Controller as allows us to inject the $scope, but think about how you can abstract the same behaviour into a Factory. The $scope Object can be dependency injected into the Controller and used if needed.

Firstly change this pmenu.products = response.data; to $scope.products = response.data; So wrap your $scope.products = response.data; with this below

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

Then update your html to use scope instead of view model

Just try it and let's see the magic. hope it works for you