ラジオの回答に基づいてNgリピートのラジオボタンが選択されています

アイテムがng-repeatブロックにあるときに他の回答が選択されている場合、回答を隠す方法を理解するための助けが必要です。たとえば、以下のコードにあります。ユーザーが質問1でanswer11を選択すると、質問2では質問の下にリストされている可能な回答からanswer21のみが使用可能になります。ラジオの回答に基づいてNgリピートのラジオボタンが選択されています

var app = angular.module('plunker', []); 
 

 

 
app.controller('MainCtrl', ['$scope', 
 
    function($scope) { 
 

 

 
    $scope.questions = [{ 
 
     questiontxt: 'Please select your Age range', 
 
     qid: 1234, 
 
     Answer: [{ 
 
      answertxt: "answer11", 
 
      aId: 83493 
 
     }, { 
 
      answertxt: "answer12", 
 
      aId: 1223 
 
     }, { 
 
      answertxt: "answer13", 
 
      aId: 1223 
 
     }] 
 
     }, 
 
     { 
 
     questiontxt: 'Please select your favorite activity', 
 
     qid: 5678, 
 
     Answer: [{ 
 
      answertxt: "answer21", 
 
      aId: 90886 
 
     }, { 
 
      answertxt: "answer22", 
 
      aId: 67107 
 
     }] 
 
     }, 
 
     { 
 
     questiontxt: 'Please select your favorite food', 
 
     qid: 4321, 
 
     Answer: [{ 
 
      answertxt: "answer31", 
 
      aId: 32342 
 
     }, { 
 
      answertxt: "answer32", 
 
      aId: 79130 
 
     }] 
 
     } 
 
    ]; 
 
    } 
 
]);

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="question in questions"> 
 
    <div class="row"> 
 
     <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span> 
 
    </div> 
 
    <div ng-repeat="answer in question.Answer"> 
 
     <input type="radio" value="{{answer.answertxt}}{{$parent.$index}}" ng-model="question.selectedAnswer" ng-value="{{answer.answertxt}}" />{{answer.answertxt}} 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-11-26 user990951

でselectedAnswerと一致した場合nswerと見ます選択時に他の質問のターゲットとされた回答を無効にするか、または大文字と小文字を区別して削除する「除去する」および「除去する」。たとえば、

... 
Answer: [{ 
    answertxt: "answer11", 
    aId: 83493, 
    hides: [{ 
    qid: 5678, 
    aId: 67107 
    }], 
    removes: [{ 
    qid: 4321, 
    aId: 32342 
    }] 
}, 
...

回答11は回答22を非表示にして回答31を削除します。 isRemovedとisDisabledフラグがselect(question, answer)での回答の選択に設定されている

<div ng-repeat="answer in question.Answer"> 
    <div ng-if="!answer.isRemoved"> 
    <input type="radio" 
      ng-change="select(question, answer)" 
      ng-disabled="answer.isDisabled" 
      ng-model="question.selectedAnswer" 
      ng-value="answer.answertxt" /> 
    <strike ng-if="answer.isDisabled">{{answer.answertxt}}</strike> 
    <span ng-if="!answer.isDisabled">{{answer.answertxt}}</span> 
    </div> 
</div>

：
あなたのHTMLは次の表示ロジックに煮詰めるでしょう。

全作業例：

var app = angular.module('plunker', []); 
 

 

 
app.controller('MainCtrl', ['$scope', 
 
    function($scope) { 
 
    
 
    function getAnswer(qid, aid) { 
 
     var qs = $scope.questions, q; 
 
     for (var i = 0; i < qs.length; ++i) { 
 
      if (qs[i].qid === qid) { 
 
      q = qs[i]; 
 
      break; 
 
      } 
 
     } 
 
     if (q) { 
 
      var as = q.Answer; 
 
      for (i = 0; as.length; ++i) { 
 
      if (as[i].aId === aid) { 
 
       return as[i]; 
 
      } 
 
      } 
 
     } 
 
    } 
 
    
 
    function doHide(q, a) { 
 
     if (a.hides && a.hides.length) { 
 
     for (var i = 0; i < a.hides.length; ++i) { 
 
      var h = a.hides[i], 
 
       answer = getAnswer(h.qid, h.aId); 
 
      if (answer) { 
 
      answer.isDisabled = (q.selectedAnswer == a.answertxt); 
 
      } 
 
     } 
 
     } 
 
    } 
 
    
 
    function doRemove(q, a) { 
 
     if (a.removes && a.removes.length) { 
 
     for (var i = 0; i < a.removes.length; ++i) { 
 
      var r = a.removes[i], 
 
       answer = getAnswer(r.qid, r.aId); 
 
      if (answer) { 
 
      answer.isRemoved = (q.selectedAnswer == a.answertxt); 
 
      } 
 
     } 
 
     } 
 
    } 
 
    
 
    $scope.select = function (q, a) { 
 
     var as = q.Answer; 
 
     
 
     for (var i = 0; i < as.length; ++i) { 
 
     var answer = as[i]; 
 
     doHide(q, answer); 
 
     doRemove(q, answer); 
 
     } 
 
    }; 
 

 
    $scope.questions = [{ 
 
     questiontxt: 'Please select your Age range', 
 
     qid: 1234, 
 
     Answer: [{ 
 
      answertxt: "answer11", 
 
      aId: 83493, 
 
      hides: [{ 
 
      qid: 5678, 
 
      aId: 67107 
 
      }], 
 
      removes: [{ 
 
      qid: 4321, 
 
      aId: 32342 
 
      }] 
 
     }, { 
 
      answertxt: "answer12", 
 
      aId: 1223, 
 
      removes: [{ 
 
      qid: 4321, 
 
      aId: 79130 
 
      }] 
 
     }, { 
 
      answertxt: "answer13", 
 
      aId: 1223 
 
     }] 
 
     }, 
 
     { 
 
     questiontxt: 'Please select your favorite activity', 
 
     qid: 5678, 
 
     Answer: [{ 
 
      answertxt: "answer21", 
 
      aId: 90886 
 
     }, { 
 
      answertxt: "answer22", 
 
      aId: 67107 
 
     }] 
 
     }, 
 
     { 
 
     questiontxt: 'Please select your favorite food', 
 
     qid: 4321, 
 
     Answer: [{ 
 
      answertxt: "answer31", 
 
      aId: 32342 
 
     }, { 
 
      answertxt: "answer32", 
 
      aId: 79130 
 
     }] 
 
     } 
 
    ]; 
 
    } 
 
]);

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="question in questions"> 
 
    <div class="row"> 
 
     <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span> 
 
    </div> 
 
    <div ng-repeat="answer in question.Answer"> 
 
     <div ng-if="!answer.isRemoved"> 
 
     <input type="radio" 
 
      ng-change="select(question, answer)" 
 
      ng-disabled="answer.isDisabled" 
 
      ng-model="question.selectedAnswer" 
 
      ng-value="answer.answertxt" /> 
 
      <strike ng-if="answer.isDisabled">{{answer.answertxt}}</strike> 
 
      <span ng-if="!answer.isDisabled">{{answer.answertxt}}</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-11-26 16:05:12

私は、あなたのソリューションを試してみました、それが非表示をした間、私は気づいた何か、それはそれを削除/隠しされる前に、ユーザーが答えを選択した場合、要素を削除selectedAnswersの一部として表示されます。それは有益な出発点だった – user990951

のようにプロパティを追加することができます。方法論はすべてdisablesを見ることである各無線にng-disbledとng-changeとともに、それぞれの質問に

disables: [{ selectedAnswer: 83493,otherQ: 5678, otherAnswerId: 90886 }]

を対応する他の質問や他の質問をチェックしてください現在選択されている答えは単純明快な方法は、2つの新しいアレイとあなたの「答え」データ構造、「皮革を強化することです無効オブジェクト

var app = angular.module('plunker', []); 
 

 

 
app.controller('MainCtrl', ['$scope', 
 
    function($scope) { 
 

 
    $scope.disableMatches = function(question, answer) { 
 
     let selectedId = question.selectedAnswer; 
 
     question.disables.forEach(function(o) { 
 
     let otherQ = $scope.questions.find(function(q) { 
 
      return q.qid == o.otherQ 
 
     }); 
 
     let otherAnswer = otherQ.Answer.find(function(ans) { 
 
      return ans.aId === o.otherAnswerId 
 
     }) 
 
     otherAnswer.disabled = selectedId == o.selectedAnswer; 
 
     }); 
 
    } 
 

 
    $scope.questions = [{ 
 
     questiontxt: 'Please select your Age range', 
 
     qid: 1234, 
 
     disables: [{ 
 
      selectedAnswer: 83493, 
 
      otherQ: 5678, 
 
      otherAnswerId: 90886 
 
     }], 
 
     Answer: [{ 
 
      answertxt: "answer11 Disables answer 21", 
 
      aId: 83493 
 
     }, { 
 
      answertxt: "answer12", 
 
      aId: 1223 
 
     }, { 
 
      answertxt: "answer13", 
 
      aId: 1223 
 
     }] 
 
     }, 
 
     { 
 
     questiontxt: 'Please select your favorite activity', 
 
     qid: 5678, 
 
     Answer: [{ 
 
      answertxt: "answer21", 
 
      aId: 90886 
 
     }, { 
 
      answertxt: "answer22", 
 
      aId: 67107 
 
     }] 
 
     }, 
 
     { 
 
     questiontxt: 'Please select your favorite food', 
 
     qid: 4321, 
 
     Answer: [{ 
 
      answertxt: "answer31", 
 
      aId: 32342 
 
     }, { 
 
      answertxt: "answer32", 
 
      aId: 79130 
 
     }] 
 
     } 
 
    ]; 
 
    } 
 
]);

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script> 
 
    <script> 
 
    </script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="question in questions"> 
 
    <div class="row"> 
 
     <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span> 
 
    </div> 
 
    <div ng-repeat="answer in question.Answer"> 
 
     <label> 
 
     <input type="radio" 
 
     name="radio{{$parent.$index}}" 
 
     ng-change="disableMatches(question)" 
 
     ng-disabled="answer.disabled" 
 
     ng-model="question.selectedAnswer" 
 
     ng-value="{{answer.aId}}" />{{answer.answertxt}}</label> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-11-26 16:04:17 charlietfl

ラジオの回答に基づいてNgリピートのラジオボタンが選択されています

答えて

関連する問題