javascript - How to get selected option in angular <select> - Stack Overflow

admin管理员组

文章数量:1332604

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.

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.

• javascript
• angularjs
• angular-material

Share Improve this question Follow asked Feb 22, 2016 at 18:24 Matthew The TerribleMatthew The Terrible 1,64366 gold badges3737 silver badges5757 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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

本文标签： javascriptHow to get selected option in angular ltselectgtStack Overflow