Question

我有四个单选按钮。按钮的每个值都绑定到其对应的textarea的值。（例如textarea1有ng-model =“c_a_multiple”，第一个单选按钮的值是字母A应该是textarea中输入的值）我的问题是当页面加载时，然后当我点击第一个单选按钮时，选择第四个单选按钮而不是第一个单选按钮。

      <li><input type="radio" name="ChoiceGroup" ng-model="radio" ng-value="c_a_multiple">&nbsp;A</li>

      <li><textarea ng-model="c_a_multiple" placeholder="type your choice A here"></textarea></li>

      <li><input type="radio" name="ChoiceGroup" ng-model="radio" ng-value="c_b_multiple">&nbsp;B</li>

      <li><textarea ng-model="c_b_multiple" placeholder="type your choice B here"></textarea></li>

      <li><input type="radio" name="ChoiceGroup" ng-model="radio" ng-value="c_c_multiple">&nbsp;C</li>

      <li><textarea ng-model="c_c_multiple" placeholder="type your choice C here"></textarea></li>

      <li><input type="radio" name="ChoiceGroup" ng-model="radio" ng-value="c_d_multiple">&nbsp;D</li>

      <li><textarea ng-model="c_d_multiple" placeholder="type your choice D here"></textarea></li>

see this plunker

Answer 1

我相信当你最初尝试点击一个单选按钮时（例如＆＃39; C＆＃39;），angular会尝试选择一个值等于范围变量值的单选按钮＆＃ 39; c_c_multiple＆＃39 ;.由于该点的所有单选按钮都没有指定值，因此无法定位和选择特定的单选按钮。

如果将四个文本区域使用的四个不同范围变量中的每一个初始化为唯一值，您将看到能够成功选择一个单选按钮：

app.controller('MainCtrl', function($scope) {
$scope.radio = " ";
$scope.c_a_multiple = "a";
$scope.c_b_multiple = "b";
$scope.c_c_multiple = "c";
$scope.c_d_multiple = "d";
});

请参阅此https://jsfiddle.net/fNPvf/32377/以及下面的代码以获取可能的解决方案。

每当更改单选按钮选择或更新其中一个输入字段时，我都使用ng-change调用控制器中的函数。该函数设置$ scope.radio的值，因此选择正确的单选按钮，然后将$ scope.inputValue设置为所选文本区域的值。

主控制器：

app.controller('MainCtrl', function($scope) {
  $scope.updateInputValue = updateInputValue;

  function updateInputValue(radioButtonSelected){
    $scope.radio = radioButtonSelected;
     switch ($scope.radio) {
        case 'a':
            $scope.inputValue = $scope.c_a_multiple;
            break;
        case 'b':
            $scope.inputValue = $scope.c_b_multiple;
            break;
        case 'c':
            $scope.inputValue = $scope.c_c_multiple;
            break;
        case 'd':
            $scope.inputValue = $scope.c_d_multiple;
            break;
        default:
            $scope.inputValue = "";
            break;
    }
  }
});

HTML：

{{inputValue}}

          <li><input type="radio" name="ChoiceGroup" ng-model="radio" value="a" ng-change="updateInputValue('a')">&nbsp;A</li>

          <li><textarea ng-model="c_a_multiple" ng-change="updateInputValue('a')" placeholder="type your choice A here"></textarea></li>

          <li><input type="radio" name="ChoiceGroup" ng-model="radio" value="b" ng-change="updateInputValue('b')">&nbsp;B</li>

          <li><textarea ng-model="c_b_multiple" ng-change="updateInputValue('b')" placeholder="type your choice B here"></textarea></li>

          <li><input type="radio" name="ChoiceGroup" ng-model="radio" value="c" ng-change="updateInputValue('c')">&nbsp;C</li>

          <li><textarea ng-model="c_c_multiple" ng-change="updateInputValue('c')" placeholder="type your choice C here"></textarea></li>

          <li><input type="radio" name="ChoiceGroup" ng-model="radio" value="d" ng-change="updateInputValue('d')">&nbsp;D</li>

          <li><textarea ng-model="c_d_multiple" ng-change="updateInputValue('d')" placeholder="type your choice D here"></textarea></li>

存储已保存的信息

1 个答案: