用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>