代码之家 › 专栏 › 技术社区 › Maarten Meeusen

显示功能导致ng重复

ng-repeat angularjs-ng-repeat angularjs javascript

Maarten Meeusen · 技术社区 · 9 年前

我正在做一个小角度的项目,但被卡住了。我正在用ng repeat填充一张桌子。每次跑步都有gps坐标。我有一个函数,可以返回这些坐标所在的城市。我想要的是跑步显示的是城市而不是坐标。因此,当repeat填充表时,它应该为每次运行调用此函数,并显示函数的返回值,即城市。

现在我有一个调用函数的按钮,然后它会显示出来,但我希望在加载时显示结果。有人能帮我吗?

以下是我到目前为止的情况:

$http.get('/fastrada/getRun.do').success(function (data) {
        $scope.runs = data;

        angular.forEach($scope.runs, function (run){
            /*run.city =*/ $scope.getInfo(run);
        });

        $scope.loading=true;
    });

$scope.getInfo = function(run)
        {
            var latlng =  run.latitude+","+run.longitude;
            var request = new XMLHttpRequest();

            if(run.latitude != 0 && run.longitude != 0) {
                request.open('GET', 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng, true);

                request.onload = function () {
                    if (request.status == 200 || request.status == 0) {
                        // Success!
                        var data = JSON.parse(request.responseText);

                        if(data !== undefined && data.results[0] !== undefined){
                            run.city = data.results[0].address_components[2].long_name;
                        }else {
                            run.city = "undefined";
                        }
                        //return data.results[0].address_components[2].long_name;
                    }
                    else {
                        // We reached our target server, but it returned an error
                        //alr.textContent = "Google Server Request didn't worked";
                    }
                };

                request.onerror = function () {
                    // There was a connection error of some sort
                    //alr.textContent = "Google Server Request didn't worked";
                };

                request.send();
            }else{
                run.city = "undefined";
            }
        }

以及html:

<tr ng-repeat="run in runs track by $index">
                                    <td>{{run.city}}</a></td>
                                    <td>{{run.getTime}}</td>
                                    <td><button ng-click="getInfo(run)">Get City</button></td>
                                </tr>

Here is a Plunk 证明了我的意思。谢谢

1 回复 | 直到 9 年前

Michael Oryl 9 年前

您可以为ng repeat中的每个Run使用单独的控制器,然后在该RunController实例中触发查找,而不是在父控制器中使用按钮和getInfo()方法。

我修改了你的Plunk以使其工作。 Here it is .

这是新的RunController:

fastradaApp.controller('RunController', ['$scope', '$http', '$log',
  function($scope, $http, $log) {
    $scope.loading = false;
    $scope.getInfo = function() {  // note we reference $scope.run (as created by the ng-repeat loop)
      console.log($scope.run);
      if ($scope.run !== undefined) {
        var latlng = $scope.run.latitude + "," + $scope.run.longitude;
        if ($scope.run.latitude !== 0 && $scope.run.longitude !== 0) {
          $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng)
            .success(function(data, status, headers, config) {
              $log.info(data);

              if (data !== undefined && data.results[0] !== undefined) {
                $scope.run.city = data.results[0].address_components[2].long_name;
              } else {
                $scope.run.city = "undefined";
              }
            })
            .error(function(data, status, headers, config) {
              // called asynchronously if an error occurs
              $scope.run.city = "undefined";
            });
        } else {
          $scope.run.city = "undefined";
        }
      }

    };
    $scope.getInfo();
  }
]);

注意,没有“run”参数传递给getInfo()函数。相反,它使用$scope.run,这是ng重复循环创建的特定运行实例。

还要注意,我用一个简单的$http调用替换了复杂的请求代码。它更干净,因为它不需要真正的设置,而且您甚至不必对结果使用JSON.parse()。

我还使用$log服务添加了一些日志记录,以使其更加明显。当然,它不需要工作。

HTML保持不变:

<tr ng-repeat="run in runs" ng-controller="RunController">
    <td>{{run.runId}}</td>
    <td>{{run.city}}</td>
    <td>{{run.time}}</td>
</tr>