Question

我正在撰写一款应用，要求用户点击某个位置，然后通过Google地图将其定位到该位置。我有数千个以JSON格式存储的位置。我希望能够单击该位置的名称，并让应用程序从文件中提取坐标。到目前为止我有这个代码。

HTML

<body>
    <h1>ECC Site Lookup</h1>

    <div ng-controller="firstCtrl">
      <input type="text" ng-model="search" border="1" />
      <ul>
        <li ng-repeat="site in SiteLocs |filter : search ">
          <a href="http://maps.google.com/?q=" + {{site.Point.coordinates}}> {{site.name}} </a>
        </li>"
        <li ng-repeat="site in SiteLocs |filter : search "></li>
      </ul>
    </div>
  </body>

我认为这有什么问题是href部分。特别是{{site.Point.coordinates}}

这是我的JS代码

(function() {
  var app = angular.module('app', []);

  app.controller('firstCtrl', function($scope) {
$scope.SiteLocs = [{
        "name": "502 Nelson St, Greenville, MS 38701",
        "visibility": "0",
        "description": "502 Nelson St, Greenville, MS 38701",
        "styleUrl": "#waypoint",
        "Point": {
          "coordinates": "-91.05636,33.415485,0"
        }

      }, {
        "name": "242 Blackhawk Trace, Galena, IL 61036",
        "visibility": "0",
        "description": "242 Blackhawk Trace, Galena, IL 61036",
        "styleUrl": "#waypoint",
        "Point": {
          "coordinates": "-90.319778,42.390862,0"
        }
      }, {
        "name": "3747 Ocean Dr, Vero Beach, FL 32963",
        "visibility": "0",
        "description": "3747 Ocean Dr, Vero Beach, FL 32963",
        "styleUrl": "#waypoint",
        "Point": {
          "coordinates": "-80.358248,27.659094,0"
        }];
angular.forEach($scope.SiteLocs, function(location){


    // if last 2 characters in string are ",0"
    var clength = location.Point.coordinates.length;


    if (location.Point.coordinates.substring(clength-2,clength)===",0")
    {
      location.Point.coordinates = location.Point.coordinates.substring(0,clength-2);

    }

  });
  });
  }());

Answer 1

我不知道它是否是最好的解决方案，但我可能会创建一个包装函数来代替模板中的原始{{site.Point.coordinates}}。

将'site'作为参数并以此方式返回坐标。让它构建整个链接甚至可能是好的，这样你就可以在控制器而不是视图中拥有所有这些链接。

你也不能这样做

var clength = location.Point.coordinates.split[',']

然后

if(clength[clength.length-1] === '0')

而不是所有难以理解的子字符串？

Answer 2

问题是你没有把坐标放在href中，它们在href的引号之外。

 <a href="http://maps.google.com/?q=" + {{site.Point.coordinates}}>

应该是

<a href="http://maps.google.com/?q={{site.Point.coordinates}}">

看起来你试图连接html中的字符串，除非在{{}}表达式括号内完成，否则它将无效。

<a href="{{'http://maps.google.com/?q=' + site.Point.coordinates}}">

Answer 3

不要连接并（通常）使用ng-href：

<a ng-href="http://maps.google.com/?q={{site.Point.coordinates}}">{{site.name}}</a>

在{{thing}}属性中使用href之类的角度标记，如果用户在Angular有机会将{{thing}}标记替换为ng-href之前点击它，则链接会转到错误的网址值。

Relevant angularJS documentation

但是，您确实不需要在ng-repeat内使用href，因为必须先编译它。你仍然可以在这里使用{{1}}。

从JSON文件中获取特定信息

3 个答案: