Question

我遇到了一个奇怪的问题：我的搜索表单向我的服务器发出了三个不同的请求，但是当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>

有什么建议吗？

提前致谢

Answer 1

Mixing loop variable scope与异步来电是classical mistake in JS。 for循环中i变量的范围不正确。

要解决此问题，请使用.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);
        });
    });

Answer 2

我意识到我迟到了三年，但对于其他有问题的人我想分享我通常做的事情来解决这个问题。这很简单，我只需将for (i=0;…更改为for (let i=0;…。只需添加一个单词，就可以神奇地修复所有内容。

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

AngularJS：ng-repeat不会始终显示数据

2 个答案: