How to get selected option in angular <select>

Question

Trying to figure out how to get the id and name of the selected item in angular. Basically brand new to js and angular so not quite sure what I'm doing wrong. I'm sure its something simple I'm missing.

I have an html element that looks like:

 <md-input-container>
     <label>Difficulty</label>
     <md-select ng-model="difficulty" ng-change="update()">
         <md-option ng-repeat="difficulty in difficulties">
             {{difficulty.Name}}
         </md-option>
    </md-select>
</md-input-container>

Calling an api to get the list of difficulties gives back the following json

[{DifficultyID: 1, Name: "Easy"}, {DifficultyID: 2, Name: "Medium"}, {DifficultyID: 3, Name: "Hard"}]

In my controller I have defined the method

$scope.update = function () {
            console.log($scope.item.Name);
        }

Always get an undefined for Name.

oKonyk · Accepted Answer · 2016-02-22 18:50:53Z

3

ng-value might be useful in this case. See working Plunker.

<md-select ng-model="difficulty">
     <md-option ng-value="opt" ng-repeat="opt in difficulties" ng-click="update(opt)">
         {{opt.Name}}
     </md-option>
</md-select>

I've introduced opt variable in order to eliminate difficulty duplication. In addition to that I'm doing ng-click on particular option instead of ng-change on parent md-select

answered Feb 22, 2016 at 18:50

oKonyk

1,47611 silver badges16 bronze badges

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

Comments

jstuartmilne · Accepted Answer · 2016-02-22 18:41:34Z

2

Your selected option should be in the model you've set in ng-model.

That said to access your selected option you should test your difficulty model in scope

$scope.difficulty

should hold your selected item.

Want to see it working try

$scope.$watch('dificulty',function(newVal,oldVal){
  console.log($scope.dificulty);
});

On every model change it will get printed. BTW I havent used that directive. But I don't see the ng-change supported on the available properties for that directive.

Hope it helps

edited Feb 22, 2016 at 18:41

answered Feb 22, 2016 at 18:36

jstuartmilne

4,5181 gold badge22 silver badges30 bronze badges

2 Comments

Matthew The Terrible Over a year ago

Oh, well I can get that to work, except I don't appear to have access to the difficultyID, which is mostly what I'm after.

jstuartmilne Over a year ago

try Initializing the variable first on your controller . So put $scope.dificulty = someValue

Collectives™ on Stack Overflow

How to get selected option in angular <select>

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related