2013-04-09 90 views
0

我對Angular非常新穎,所以甚至不知道我在做什麼是正確的事情。如果沒有,請指出我的方向。Angular JS - 在腳本中使用{{}}

我想要做什麼:

我使用JSON來獲得外部地圖數據以及angular-google-maps數據加載。我的JSON有大約100個名字,緯度和經度。我想使用Angular來循環訪問這些數據,並將標記放置在我的地圖上,以供每個地點使用。

HTML

<body ng-controller="ExampleController"> 
    <input type="text" ng-model="data.message"> 
    <li class="places" ng-repeat="place in places"> 
     <p class="link">{{place.name}}</p> 
     <p>{{place.lat}}</p> 
     <p>{{place.lng}}</p> 

    <div class="google-map" 
    center="centerProperty" 
    zoom="zoomProperty" 
    markers="markersProperty" 
    latitude="clickedLatitudeProperty" 
    longitude="clickedLongitudeProperty" 
    mark-click="true" 
    draggable="true" 
    style="height: 500px; width: 80%; "> 
    </div> 
</li> 

</body> 

的Javascript

(function() { 
    var module = angular.module("angular-google-maps-example", ["google-maps"]); 
}()); 

function ExampleController ($scope, $http) { 
    $http.get('json/map-data.json').success(function(data) { 
    $scope.places = data; 
    }); 

    angular.extend($scope, { 

     /** the initial center of the map */ 
     centerProperty: { 
      lat: 45, 
      lng: -73 
     }, 

     /** the initial zoom level of the map */ 
     zoomProperty: 8, 

     /** list of markers to put in the map */ 
     markersProperty: [ { 
       latitude: 45, 
       longitude: -74 
      }], 

     // These 2 properties will be set when clicking on the map 
     clickedLatitudeProperty: null, 
     clickedLongitudeProperty: null, 
    }); 
} 

爲什麼它不工作

顯然我有點超過我的頭,我試圖找到一種獲得{{place.lat}}和的方法轉換爲Javascript中的markersProperty:。我可以以某種方式將這些值推入到markersProperty數組中嗎?達到此目的的最佳方式是什麼?

回答

1

在JavaScript中,引用他們通過$範圍:

$scope.place.name 
$scope.place.lat 
$scope.place.lng