Alan Alan - 4 days ago 5
Javascript Question

Map marker and list in bootstrap

My requirement is when i click on certain markers on google map, the places must be updated in a list in bootstrap. But when i click the array is updated but the list is not updated in bootstrap. When i used infowindow everything worked.

html

<div class="panel-body">
<ul style="padding-left:0px;">
<li class="list-group-item list-group-item-info" ng-repeat="x in routesub" style="font-size:smaller;">
<span class="badge" ng-click="delloc(x)">x</span>
{{x}}
</li>
</ul>
<button class="btn btn-danger btn-sm" ng-click="subsearch()">SUBSCRIBE</button>
</div>


app.js

google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {

// var content1 = "<div><h6><font color='black'>" + locations[i].Name + "</font></h6><input type = 'button' class = 'btn btn-success btn-sm' value = 'Select' ng-click = 'SubLoc();' /></div>";
//var content = $compile(content1)($scope);
//$scope.infowindow.setContent(content[0]);
//$scope.infowindow.open($scope.map, marker);
$scope.SubLoc = function () {
if ($scope.routesub.indexOf(locations[i].Name) == -1) {
$scope.routesub.push(locations[i].Name);
$scope.routeidsub1.push(locations[i].LocationId);
marker.setIcon(icon_sel);
// $scope.infowindow.close();
}
else {
//$scope.infowindow.close();
}
}
$scope.SubLoc();

}
})(marker, i));


When I uncommented those commented parts and used infowindow everything worked out perfecftly. After commenting when I click on marker the data is stored in
$scope.routesub
but not visible in html.Help me

Answer

As you are out of the "angular world" in your google event listener you have angular to tell that it has to start a digest cycle to refresh its bound values.

Wrap the values you want to update into an $apply function like this:

$scope.$apply(function(){
    $scope.routesub.push(locations[i].Name);
});

Alternatively you can also use $timeout (my preferred way) because it produces no "digest already running" errors:

$timeout(function(){
    $scope.routesub.push(locations[i].Name);
});
Comments