CODEWITHSUNDEEP
angularjs
Duffy Dolan
Duffy Dolan

Reputation: 500

Can't get Angular select to update with selected value

I'm using selects to allow a user to switch between events and years. Each change will pull appropriate data from the server, return and update the page. However, the select box goes from the selected value to an empty value. I've looked at numerous solutions and they aren't working.

<select
   ng-model="eventName"
   ng-options="item.value for item in eventOptions track by item.value"
   ng-change="changeEvent(eventName.value)">
</select>

This is the changeEvent function:

$scope.changeEvent = function(eventName){
    $scope.eventName = eventName; //wrongly assumed this would update the selected value
    $scope.getData($scope.eventName,$scope.eventYear); //this returns the json - correct
    $scope.updateSelected(); //meant to update the select field value on the page - fails
};

$scope.eventName or $scope.eventYear values will properly update on a change, but has no effect on the page. The selects just empty of a selected value.

UPDATED (with corrected code) I wanted to post the changes I made more clearly than the comment allows.

I removed the object param "value" from the options and the argument from the function call (eventName.value).

<select
    ng-model="eventName"
    ng-options="item for item in eventOptions track by item"
    ng-change="changeEvent()">
</select>

And the changeEvent function gets simplified to:

$scope.changeEvent = function(){
    $scope.getData($scope.eventName,$scope.eventYear);
};

It all works as expected! Thanks to all, especially Delta who got me looking at it the right way.

Upvotes: 1

Views: 1931

Answers (2)

Delta
Delta

Reputation: 851

So, your event name variable is set to be item. not item.value so instead of passing in changeEvent(eventName.value) try passing in changeEvent(eventName). either way the value you are passing into your method doesnt match the value of your model's variable

item.value for item in eventOptions track by item.value

so for this statement, you are saying make my options ng-model=item but make their value=item.value so they show what you want them to show but still have all the information you need from each one.

Upon further inspection is looks like you dont need:

 $scope.eventName = eventName; 
 $scope.updateSelected();

Angular should be updating your eventName for you, you just need to call the change method.

Upvotes: 1

gonkan
gonkan

Reputation: 259

I'm not sure you need:

ng-change="changeEvent(eventName.value)"

if you use ng-options the model will be updated in the scope automatically on selection. You could watch the value in the controller if you want to do other stuff when it changes:

$scope.$watch('eventName', function() {
   //do stuff
});

Upvotes: 0

Related Questions