用angularjs绑定单选按钮和输入文本字段

Question

即时通讯与此代码有一些问题，被卡住了。 我试图仅在一行中显示两个答案（来自两个问题），并在“您的答案”之后动态显示在底部，因此，如果用户在单选按钮或下拉菜单中更改选择，它们将动态更改。 到目前为止，我只能显示一个答案。 此外，“选择”输入文本字段中还有一个错误。 当用户输入时，应显示1个秋天，2个春天，依此类推，但现在它仅适用于0到3而不是1到4的数字。我尝试了不同的方法尝试解决此问题，但未成功

 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> 

非常感谢

Answer 1

 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() { //console.log(a); $scope.selectedQuarter = $scope.quarters[$scope.number - 1]; //console.log($scope.selectedQuarter); }; $scope.$watch('selectedQuarter', function() { //console.log(a); if ($scope.selectedQuarter) $scope.number = $scope.selectedQuarter.number + 1; //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" ng-change="change1()"></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="number" ng-model="number" ng-change="change()" /> </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>