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

binding radio buttons and input text fields with angularjs

本文关键字:输入 文本 单选按钮 angularjs 绑定      更新时间:2023-09-26

我对这段代码有一些问题,并且卡住了。我试图显示两个答案(从两个问题)在只有一行和动态在底部"你的答案"之后,所以他们动态地改变,如果用户改变选择无论是在单选按钮或下拉菜单。到目前为止我只能显示一个答案。此外,在选择输入文本字段中有一个错误。当用户输入时,应该显示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>
非常感谢

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>