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 badges2 Answers
Reset to default 3ng-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