AngularJS：ng-repeat 并不总是显示数据答案

【问题标题】：AngularJS: ng-repeat doesn't show always the dataAngularJS：ng-repeat 并不总是显示数据
【发布时间】：2013-12-12 17:22:59
【问题描述】：

我遇到了一个奇怪的问题：我的搜索表单向我的服务器发起了三个不同的请求，但是当 Angular 必须显示数据时，数据通常不会出现。我确定数据来自服务器，因为我在 FireBug 中看到了它们。所有请求都已发送......但我认为并非所有请求都由 angularJS 处理。也许我对它的使用有误。

这是我的代码：

$scope.queryUser = {};
    $scope.index = ['central', 'distributed', 'other'];
    //$scope.index = ['distributed'];
    $scope.results = {};
    $scope.url = "/MyApp/search.do?index=" ;

    $scope.search = function(query) {

         $scope.queryUser= angular.copy(query);

        // Create the http post request
        // the data holds the keywords
        // The request is a JSON request.
        for( i in $scope.index ){
            $http.get($scope.url + $scope.index[i] + "&query=" + $scope.queryUser.value).
            success(function(data, status, headers, config) {
                $scope.status = status;
                $scope.results[$scope.index[i]+"Items"] = data;

                console.log(i);
                for(x in $scope.results.distributedItems){
                    console.log(x);
                }
            })
            .
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;   
                console.log("error: " + $scope.status);
            });
        }

确实，console.log 只打印一次索引……这对我来说很奇怪。我认为这三个请求是重叠的。

然后是ng-repeat的代码

<div id='aggregated_results_domain'>
            <div id="results_distributed">
                <table id="table_results_distributed" cellspacing="5" cellpadding="3" bgcolor="#eee">
                    <tr ng-repeat="(keyDistributed, valueDistributed) in results.distributedItems">
                        <td>{{keyDistributed}}</td>
                    </tr>
                </table>
            </div>
            <div id="results_central">
                <table id="table_results_central" cellspacing="5" cellpadding="3" bgcolor="#eee">
                    <tr ng-repeat="(keyCentral, valueCentral) in results.centralItems">
                        <td>{{keyCentral}}</td>
                    </tr>
                </table>
            </div>
            <div id="results_other">
                <table id="table_results_other" cellspacing="5" cellpadding="3" bgcolor="#eee">
                    <tr ng-repeat="(keyOther, valueOther) in results.otherItems">
                        <td>{{keyOther}}</td>
                    </tr>
                </table>
            </div>

有什么建议吗？

提前致谢

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

Mixing loop variable scope 与 async 调用是 classical mistake in JS。 i 变量的作用域在 for 循环中不正确。

要解决此问题，请使用.forEach 函数或创建一个在其范围内捕获i 的函数：

    $scope.index.forEach(function (i) {
        $http.get($scope.url + $scope.index[i] + "&query=" + $scope.queryUser.value).
        success(function(data, status, headers, config) {
            $scope.status = status;
            $scope.results[$scope.index[i]+"Items"] = data;

            console.log(i);
            for(x in $scope.results.distributedItems){
                console.log(x);
            }
        })
        .
        error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;   
            console.log("error: " + $scope.status);
        });
    });

【讨论】：

你是对的......这是我的错！我不平常那样想！非常感谢！

【解决方案2】：

我意识到我迟到了三年，但对于遇到问题的其他人，我想分享我通常会做什么来解决这个问题。真的很简单，我把for (i=0;…改成for (let i=0;…就行了。只需添加一个单词即可神奇地解决所有问题。

之所以有效，是因为let 关键字将变量范围限定为块而不是函数。

【讨论】：