最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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.

Share Improve this question asked Feb 22, 2016 at 18:24 Matthew The TerribleMatthew The Terrible 1,6436 gold badges37 silver badges57 bronze badges
Add a ment  | 

2 Answers 2

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

发布评论

评论列表(0)

  1. 暂无评论