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

Question

我在使用此代码时遇到了一些问题并被卡住了。我试图仅在一行中显示两个答案（来自两个问题），并在“您的答案”之后动态显示在底部，因此如果用户在单选按钮或下拉菜单中更改选择，它们会动态变化。到目前为止，我只能显示一个答案。此外，选择输入文本字段中存在错误。当用户输入时，应该显示 1 fall，2 spring 等等，但现在它只适用于从 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>