Question

我正在做一个有点角的项目而且被卡住了。我正在填写一张表，其中包含来自使用ng-repeat的休息呼叫的运行。在每次运行中都有gps坐标。我有一个函数可以返回这些坐标所在的城市。我想要的是跑步显示城市而不是坐标。因此，当重复填充表时，它应该为每次运行调用此函数并显示函数的返回值，即城市。

现在我有一个调用该函数的按钮，然后显示它但我想在加载时显示结果。有人能帮助我吗？

这是我到目前为止所拥有的：

$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证明了我的意思。谢谢！

Answer 1

您可以使用单独的控制器为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-repeat循环创建的特定运行实例。

另请注意，我使用简单的$ 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>

显示功能导致ng-repeat

1 个答案: