Javascript AngularJS$循环/forEach中的作用域
我正在编写一个应用程序，它允许用户点击一个位置并指向谷歌地图，一切正常，除了：在这个应用程序中，我有一个表，我希望能够按照与用户的距离或名称进行排序，但是，我很难获得显示的距离。我用哈弗森公式计算到这个位置的距离。我已经用固定坐标测试了这个公式，这个公式不是问题。我相信问题在于较长的Javascript AngularJS$循环/forEach中的作用域,javascript,angularjs,loops,foreach,angularjs-scope,Javascript,Angularjs,Loops,Foreach,Angularjs Scope,我正在编写一个应用程序，它允许用户点击一个位置并指向谷歌地图，一切正常，除了：在这个应用程序中，我有一个表，我希望能够按照与用户的距离或名称进行排序，但是，我很难获得显示的距离。我用哈弗森公式计算到这个位置的距离。我已经用固定坐标测试了这个公式，这个公式不是问题。我相信问题在于较长的forEach和getCoordDistance（）和位置。距离=d在底部。我得到一个错误，说没有定义$scope.myLat，$scope.myLon，$scope.locLat，和$scope.locLon，然后
forEachgetCoordDistance（）和位置。距离=d在底部。我得到一个错误，说没有定义$scope.myLat
，$scope.myLon
，$scope.locLat
，和$scope.locLon
，然后我也得到了这个奇怪的错误
TypeError: undefined is not a function
at getCoordDistance (http://run.plnkr.co/NDFxGL6q55m1601d/script.js:32490:21)
at http://run.plnkr.co/NDFxGL6q55m1601d/script.js:32469:7
at Array.forEach (native)
at Object.q [as forEach] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:280)
at new <anonymous> (http://run.plnkr.co/NDFxGL6q55m1601d/script.js:32459:11)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:479)
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:35:103)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:66:467
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:53:250
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:386)
和HTML（如果重要）：
<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script data-require="geo-location-javascript@*" data-semver="0.4.8" src="//cdnjs.cloudflare.com/ajax/libs/geo-location-javascript/0.4.8/geo.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<title>ECC</title>
</head>
<body link="white" vlink="white">
<center>
<h1>Site Lookup</h1>
<div>{{site.carrier}}</div>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search" border="1" placeholder="Please enter site name..." />
<select placeholder = "Sort by..." ng-model="repoSortOrder">Sort by
<option value="site.name">Name</option>
<option value="site.distance">Distance</option>
</select>
<table border="1" width="100%">
<thead>
<tr>
<td>Name</td>
<td>Distance</td>
<td>Carrier</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="site in SiteLocs | orderBy:'repoSortOrder' | filter : search">
<td>
<a ng-href="http://maps.google.com/?q={{site.Point.coordinates}}">
{{site.name}}
</a>
</td>
<td>{{site.distance}} Miles</td>
<td>
{{site.carrier}}
</td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
ECC
站点查找
{{site.carrier}
排序
名称
距离
名称
距离
载体
{{site.distance}}英里
{{site.carrier}
试着这样定义它：
$scope.getCoordDistance=函数（）{…}
并在forEach中调用函数之前定义该函数。
（使用$scope.getCoordDistance（）调用它）在代码中，您在getCoordDistance
函数中声明了toRad
方法，但在尝试使用toRad
方法后调用了此方法。
因此，当您想要调用它时，toRad方法还没有定义
编辑：
注释：toRad函数仅适用于数字，坐标不适用。可靠的努力，但没有骰子。还有其他想法吗？请你再解释一下好吗@Polochon在getCoordDistance函数中声明toRad方法，但在尝试使用toRad方法后调用此方法。因此，当您想要调用它时，toRad方法尚未定义。是的，只需将Number.prototype.toRad声明直接移动到控制器的核心中即可。这不起作用，但我相信问题在于，toRad只与数字一起工作，坐标是字符串。您可以使用Number（location.coords.latitude）
<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script data-require="geo-location-javascript@*" data-semver="0.4.8" src="//cdnjs.cloudflare.com/ajax/libs/geo-location-javascript/0.4.8/geo.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<title>ECC</title>
</head>
<body link="white" vlink="white">
<center>
<h1>Site Lookup</h1>
<div>{{site.carrier}}</div>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search" border="1" placeholder="Please enter site name..." />
<select placeholder = "Sort by..." ng-model="repoSortOrder">Sort by
<option value="site.name">Name</option>
<option value="site.distance">Distance</option>
</select>
<table border="1" width="100%">
<thead>
<tr>
<td>Name</td>
<td>Distance</td>
<td>Carrier</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="site in SiteLocs | orderBy:'repoSortOrder' | filter : search">
<td>
<a ng-href="http://maps.google.com/?q={{site.Point.coordinates}}">
{{site.name}}
</a>
</td>
<td>{{site.distance}} Miles</td>
<td>
{{site.carrier}}
</td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>