AngularJS - Passing select list value to function returning undefined

Question

I have 3 select lists that I'm trying to pass the selected value over to a function.

		$scope.mapSelections = function(location) {

		  var filteredPins = [];

		  console.log('location:' + location);
          
            var region = (location ? location.location.Region : '');
		    var state = (location ? location.state.StateName : '');
		    var city = (location ? location.city.CityName : '');

		  $scope.dataObject.forEach(function(itemElement, itemIndex) {
		    itemElement.Locations.forEach(function(locationElement, locationIndex) {
		      if (locationElement.Region === region || !region) {
		        locationElement.Sites.forEach(function(siteElement, siteIndex) {
		          if ((siteElement.State == state && !city) || siteElement.City == city || (!state && !city)) {
		            filteredPins.push(siteElement);
		            // console.table(filteredPins)
		            return false;
		          }
		        });
		      }
		    });
		  });

		  $scope.filteredPins = filteredPins;
		  $scope.zoomToIncludeMarkers();

		};

<column>
  <select name="selectRegion" class="form-control" ng-model="selectRegion" ng-change="regionSelected(); mapSelections(location.Region)" ng-options="location as location.Region for location in locationObject | orderBy: location.Region:reverse track by location.Region">
    <option value="">Select Region</option>
  </select>

  <select name="selectState" class="form-control" ng-disabled="!selectRegion" ng-model="selectState" ng-change="mapSelections(state.StateName)" ng-options="state as state.StateName for state in selectRegion.States | unique: 'state.StateName' | orderBy: 'StateName' ">
    <option value="">{{regionSelectMsg}}</option>
  </select>

  <select name="selectCity" class="form-control" ng-disabled="!selectState" ng-model="selectCity" ng-change="mapSelections(city.CityName)" ng-options="city as city.CityName for city in selectState.Cities | unique: 'city.CityName' | orderBy: 'CitytName' ">
    <option value="">Select City</option>
  </select>
</column>

I am wanting to pass the value of select list selection to the mapSelections function in the ng-change, at which point it will be used in the nested forEach loop to get the values from the model and push it to a new array.

Trying to pass the ng-model of each select list to the function results in an undefined on that value. I've also tried using the iterators in the ng-repeat (location.Region, state.StateName and city.CityName) with no success.

See Plunkr: http://plnkr.co/edit/qaLFYD?p=preview

Can you make a demo on plunkr? Does that console.log work/

tymeJV
– tymeJV

2015-11-23 16:49:52 +00:00
Commented Nov 23, 2015 at 16:49 — tymeJV
– tymeJV, Commented Nov 23, 2015 at 16:49
plnkr.co/edit/qaLFYD?p=preview

TWLATL
– TWLATL

2015-11-23 17:00:37 +00:00
Commented Nov 23, 2015 at 17:00 — TWLATL
– TWLATL, Commented Nov 23, 2015 at 17:00

tymeJV · Accepted Answer · 2015-11-23 17:07:38Z

1

You have to pass in the ngModel of the select - not the ngOptions syntax:

<select name="selectRegion" class="form-control" ng-model="selectRegion" ng-change="regionSelected(); mapSelections(selectRegion)" ng-options="location as location.Region for location in locationObject | orderBy: location.Region:reverse track by location.Region">
    <option value="">Select Region</option>
</select>

Demo: http://plnkr.co/edit/jvuX5cbrPIFUTTrWFJsD?p=preview

answered Nov 23, 2015 at 17:07

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Passing select list value to function returning undefined

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