0

I have a form which the user can fill out to get directions to a destination using google maps. There are 350 possible set destinations that the user can chose from. They can chose this destination by clicking on a pin on the google map or else from a select menu in the form.

When they click on the pin on the google map I would like the select menu to change to the destination.

I am trying to use ng-selected for this however it isn't working.

Any help would be grately appreciated. Thank you.

View

   <div id="select_destination">
        <select data-ng-model="selectedDestination" 
                ng-options="station.stationID as station.stationShortAddress for station in allStationsMapData track by station.stationID" 
                data-ng-change="selectDestination(selectedDestination)"
                ng-selected="station.stationID == selectedDestination">
        </select>
    </div>

Controller

A function called getDirections is called when a user clicks on a station on the map (not selecting from the select menu). This should change the currently selected item of the select menu but doesn't. (Note: the function is executing correctly passing in the right stationID.)

$scope.getDirections = function(stationLat, stationLng, stationID){ 
    //update the select menu model to the chosen stationID.
    $scope.selectedDestination = stationID;     
};

Extra info:

I also tried using ng-selected with ng-repeat however it didn't work either.

<select data-ng-model="selectedDestination" data-ng-change="selectDestination(selectedDestination)">
    <option ng-repeat="stationMapData in allStationsMapData" 
        value="{{stationMapData.stationID}}" 
        ng-selected="{{stationMapData.stationID == selectedDestination}}">
        {{stationMapData.stationShortAddress}}
    </option>
</select>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Sarah
  • 1,943
  • 2
  • 24
  • 39

1 Answers1

2

change ng-selected="station.stationID == selectedDestination" to ng-selected="selectedDestination".

Or use ng-init instead of ng-selected.(It's more clear way.)

ng-init="selectedDestination = 'key of what you want'"

Reference Fiddle.

FIDDLE(First case)
FIDDLE(Second case)

artgb
  • 3,177
  • 6
  • 19
  • 36
  • Great example thanks. However I just tried changing that and it still doesn't work. But at least now I can see a working example. I will get back to you soon if i get it working. – Sarah Nov 07 '17 at 01:17
  • I have it working (with thanks to your example) with an indexed based array however can't seem to get it working when the array is an array of objects. Any chance you could try that out and see if you can get it working?. i.e with something like $scope.Quarters = [{'ID' :'Q1'},{'ID' : 'Q2'},{'ID': 'Q3'},{'ID':'Q4'}]; – Sarah Nov 07 '17 at 01:35
  • please see fiddle with object. https://jsfiddle.net/bjs3g/239 – artgb Nov 07 '17 at 01:36
  • wow that was quick. thanks I will study it now :) – Sarah Nov 07 '17 at 01:38
  • Also see https://jsfiddle.net/bjs3g/241, it's using ng-init – artgb Nov 07 '17 at 01:50
  • thanks for all your help. I have it working now from your example with the mail notifications and ng-options. thank you so much :) – Sarah Nov 07 '17 at 02:04
  • I just wanted to add this here (in case anybody needs this info). the model variable selectedDestination was not updating when I changed the select menu. It turned out that selectedDestination needed to be a property of an object in order for the model to update. So I now have an object called directionsFormData for the form and then directionsFormData.selectedDestination is the model for the select menu. (instead of just selectedDestination). thanks for all your help. – Sarah Nov 07 '17 at 14:23