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

【问题标题】：How to display angularjs ng-repeat with json object如何使用 json 对象显示 angularjs ng-repeat
【发布时间】：2015-11-05 13:51:49
【问题描述】：

我正在尝试使用 AngularJS 对产品结果进行搜索。我已经用我的结果获得了一个 JSON 对象”：下面的示例

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

我正在使用ng-repeat="store in storeResult"，直到我点击我的过滤器功能才会显示结果，请注意过滤器未应用！

<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 = '';
    }
}

如果我单击“setFilter”按钮，则会显示所有结果。我正在尝试弄清楚如何使其显示而无需单击按钮。

此解决方法仅适用于 Chrome。 Firefox 和 IE，从不显示结果。

Plunker：link

【问题讨论】：

你能提供工作 plunker/jsfiddle 吗？
我错过了什么吗？ docs.angularjs.org/api/ng/filter/filter
请您使用plnkr.co 或jsfiddle.net
请自行提供相关代码。为了演示问题，请在 plunker、jsfiddle.net、jsbin.com 等沙箱中提供一个简单的演示，而不是指向您的实时版本的链接，没有人可以测试您的代码
@charlietfl - 您可以在其所在的环境中测试代码。您可以检查您需要查看的所有代码以查看正在发生的事情。这个问题，说不通。我只是想显示一个带有 NG-REPEAT 的 JSON 对象，但它没有显示。

标签： javascript php json angularjs

【解决方案1】：

我最好的客人是，通过单击setFilter 按钮，您将触发一个摘要循环，因此您的ngRepeat 将被执行。我怀疑您是在摘要周期之外分配storeResult，这就是最初未显示的原因。我无法确定，因为您的描述中没有 JSON 是如何分配给您的 storeAssignment 的。

你能检查一下这个变量是如何赋值的吗？

你能改变它的方式并这样做吗：

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

您必须包含 $timeout 依赖项，但这样一来，storeAssignment 的更改将在您的摘要周期内，而 ngRepeat 将看到该更改。

希望对您有所帮助。

【讨论】：

storeResult 的值是通过 ajax 请求提取的，作为“setSearch”函数的一部分，但我无法在 plunker 中运行它，所以我只输入了字符串值。也不显示。
我已经这样做了： $timeout(function() { $scope.alcoholResult = AlcoholResult; $scope.mjResult = mjResult; $scope.storeResult = storeResult; });我的结果显示。谢谢！
这就是我所怀疑的，有一个很大的变化是，在您的 ajax 响应之后，变量被分配到摘要循环之外。你能试试我的解决方案吗？在分配时添加 $timeout 代码。那应该可以解决它（您也可以执行 $scope.apply 但我更喜欢 $timeout ，因为如果您已经在摘要周期中，您可能会遇到 apply 错误。
还不能投票，否则我会的。我发现如果我使用 angular http 而不是 ajax 调用，则摘要不会提前完成，并且数据显示不需要超时调用。我花了两天时间，非常感谢！

【解决方案2】：

在您点击过滤器功能之前，您似乎没有将过滤器设置为“全部”。确保 filter 以“全部”开头。

【讨论】：