Just diving into the world of Angular, I decided to create a simple demo involving dynamic select options. The goal is to add a new select based on the current selected value. However, I'm encountering an issue where I can't retrieve the selected value. Any assistance would be greatly appreciated.
Below is the HTML code:
<md-input-container ng-repeat="a in selects" class="md-block" style="margin-top:20px;">
<label>{{a.label}}</label>
<md-select required ng-model="a.model" ng-change="callme()" flex="40">
<md-option ng-model="a.model" ng-repeat="optionValue in a.options" ng-value="optionValue.option">
{{optionValue.option}}
</md-option>
</md-select>
<div class="errors" ng-messages="petApp.favoriteColor.$error">
<div ng-message="required"> You need to select an option</div>
</div>
</md-input-container>
Now for the JS code:
$scope.selects = [{label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}];
$scope.callme = function(){
console.log($scope.pet);
$scope.selects.push({label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]});
}
It seems that when I use $scope.pet, it returns undefined even though the model name is pet.