保存した情報を保存

Question

私は4つのラジオボタンを持っています。ボタンの各値は、対応するテキストエリアの値にバインドされます。 （たとえば、textarea1にはng-model = "c_a_multiple"があり、文字Aの最初のラジオボタンの値はテキストエリアに入力された値でなければなりません）私の問題は、ページが読み込まれてから最初のラジオボタン第1のラジオボタンではなく、第4のラジオボタンが選択される。私はあなたが最初の値に等しい値を持つラジオボタンを選択し、ラジオボタン（たとえば「C」）に角度試行をクリックしようとすると信じてい

 <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

スコープ変数 'c​​_c_multiple'。その時点でのすべてのラジオボタンは指定された値を持たないため、特定のラジオボタンを対象にして選択することはできません。

あなたが一意の値に4つのテキストエリアのために使用される4つの異なるスコープ変数のそれぞれを初期化した場合、あなたは成功したラジオボタンを選択することが可能であることがわかります。

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と潜在的な解決策のための以下のコード。

ラジオボタンの選択が変更されたり、入力フィールドの1つが更新されたりするたびに、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>