存儲保存的信息

我有四個單選按鈕。每個按鈕的值綁定到其相應的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

來源

2016-11-06 Francis Empleo

我相信，當你最初嘗試點擊單選按鈕（例如「C」），角試圖選擇具有等於的值的值的單選按鈕範圍變量'c_c_multiple'。由於該點的所有單選按鈕都沒有指定值，因此無法定位和選擇特定的單選按鈕。

如果初始化每次您使用四個文本區域唯一值的四種不同範圍的變量，你會看到你能夠成功地選擇一個單選按鈕：

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"; 
});

請參閱這Plunker，以及下面的代碼爲潛在的解決方案。

無論何時改變單選按鈕選擇或更新其中一個輸入字段，我都使用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>

來源

2016-11-06 21:29:41 Zak

存儲保存的信息

回答

相關問題