如何使用json对象显示angularjs ng-repeat

Question

I'm trying to do a search with product results using AngularJS. I've obtained an JSON object with my results": example below

[{"store_id":"17","user_id":"29","company_name":"Liquor R Us","company_type":"Alcohol",
"phone":"(303) 555-5555","website":"http:\/\/liqourrus.com","address":"5501 Peoria St",
"address_2":"","city":"Denver","state":"CO","zip":"80239","lat":"39.796181",
"lng":"-104.84863","mon_open":"","mon_close":"","tues_open":"","tues_close":"",
"wed_open":"","wed_close":"","thurs_open":"","thurs_close":"","fri_open":"","fri_close":"",
"sat_open":"","sat_close":"","sun_open":"","sun_close":"","distance":"1.1668156112981596",
"s":"s","st":"Every Store"}]

I'm using ng-repeat="store in storeResult" and the results will not display until I click on my Filter function, please note the filter is not applied!

<div class="product" ng-repeat="store in storeResult">
    {{store.company_name}}
</div>

ng-click="setFilter('all');"

$scope.setFilter = function(filter) {
    if(filter == 'all') {
        $scope.searchProduct.product_type = '';
        $scope.searchStore.company_type = '';
    }
}

If I click the "setFilter" button, all results show. I'm trying to figure out how to make it display without having to click the button.

This work around only works in Chrome. Firefox and IE, never display results.

Plunker: link

Answer 1

My best guest is that by clicking the setFilter button you are triggering a digest cycle and your ngRepeat will be executed because of that. I suspect that you are assigning your storeResult outside the digest cycle and that's the reason is not displaying initially. I cannot tell for sure because is not in your description how is that JSON assigned to your storeAssignment .

Can you check how is that variable assigned?

Can you change the way it's and do this:

$timeout(function() {
    $scope.storeAssignment = _your_json_value;
}); 

You will have to include the $timeout dependency but with this, a change in storeAssignment will be inside your digest cycle and the ngRepeat will see that change.

Hope that helps.

Answer 2

It looks like you're not setting the filter to 'all' until you click the filter function. Make sure that filter starts out as 'all'.