在 ng-repeat 中显示函数结果

Question

我正在做一个 angular 小项目，但遇到了困难。我正在用 ng-repeat 的休息呼叫中的运行填充 table。在每个运行中都有 gps 坐标。我有一个函数可以返回这些坐标所在的城市。我想要的是运行显示城市而不是坐标。因此，当重复填充 table 时，它应该为每个运行调用此函数并显示函数的 return 值，即城市。

现在我有一个调用该函数的按钮，然后它会显示出来，但我希望在加载时显示结果。有人可以帮助我吗？

这是我目前的情况：

$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 中的每个运行使用单独的控制器，然后在该运行Controller 实例中触发查找，而不是使用按钮和 getInfo() 方法在父控制器中。

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

这是新的运行控制器：

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 中显示函数结果

Display function result in ng-repeat

javascript

angularjs

ng-repeat

angularjs-ng-repeat