im having some problems with this code and got stuck. Im trying to display both answers(from the two questions) in only one line and dynamically at the bottom after "your answers", so they change dynamically if the user change the selection either in the radio buttons or in the drop down menu. i can display only one answer so far. Also, there is a bug in the Selection input text field. When the user enters 1 fall should be displayed, 2 spring and so on, but right now it only works for numbers from 0 to 3 instead than with 1 to 4. I tried different things trying to solve this but wasn't successful
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.actresses = [
{model : "Jenna"},
{model : "Mia"},
{model : "Julia"},
{model : "Olivia"}
];
$scope.quarters=[
{model : "fall", number : 0},
{model : "spring", number : 1},
{model : "summer", number : 2},
{model : "winter", number : 3},
];
$scope.change = function(a){
console.log(a);
$scope.selectedQuarter= $scope.quarters[a];
console.log($scope.selectedQuarter);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section>
<p><b>Question 1</b></p>
<p>What is your favorite quarter?</p>
<select ng-model="selectedQuarter" ng-options="x.model for x in quarters"></select>
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[0]"> fall
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[1]" > spring
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[2]"> summer
<input name='rad2' type="radio" ng-model="selectedQuarter" ng-value="quarters[3]"> winter
<p>Selection <input type="text" ng-model="selectedQuarter.number" ng-change="change(selectedQuarter.number)" /></p>
</section>
<section>
<p><b>Question 2</b></p>
<p>Who is your favorite actress?</p>
<select ng-model="selectedActress" ng-options="x.model for x in actresses"></select>
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[0]"> Jenna
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[1]" > Mia
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[2]"> Julia
<input name='rad' type="radio" ng-model="selectedActress" ng-value="actresses[3]"> Olivia
</section>
<section>
<p><b>your answers:</b></p>
<div ng-switch="selectedActress.model">
<div ng-switch-when="Jenna">
<p>Actress Jenna</p>
</div>
<div ng-switch-when="Mia">
<p>Actress Mia</p>
</div>
<div ng-switch-when=Julia>
<p>Actress Julia</p>
</div>
<div ng-switch-when=Olivia>
<p>Actress Olivia</p>
</div>
</div>
</section>