Angular JS - Using {{}} in script

Question

I'm very new with Angular so don't even know if what I'm trying to do is the right thing here. If not, please point me in the right direction.

What I want to do:

I'm using JSON to get external map data as well as angular-google-maps to load in data. My JSON has about 100 places, with names, latitudes and longitudes. I want to use Angular to loop through that data and place markers on my map for each place.

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,
    });
}

Why it's not working

Obviously I'm a little over my head, I'm TRYING to find a way to get {{place.lat}} and {{place.lng}}into the markersProperty: in the Javascript. Can I somehow push these values into the markersProperty array? What's the best way to achieve this?

Sparky · Accepted Answer · 2013-04-09 09:35:02Z

1

In your JavaScript, reference them through $scope:

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

answered Apr 9, 2013 at 9:35

Sparky

8,4871 gold badge31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS - Using {{}} in script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related