2017-12-11 10 views
0

これは基本的な質問であれば、私は怒りを覚えています。以前の質問の回答に基づいて質問を非表示にしたいたとえば、ユーザーがanswer11を選択してQ2が表示された場合、Q1が最初に表示されます。ユーザーが回答12を選択した場合、Q2は表示されません。私はまた、ラジオボタンがクリアされていることを確認したい。基本的にワークフローを作成します。私がモデルに入れていた以前の質問から、質問を隠そうとするときの解決策かもしれません。AngularJS ng-repeatブロックでのラジオの回答に基づく質問の非表示/表示

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, 
 
      removes: [{ 
 
       qid: 5678, 
 
       }] 
 
     }, { 
 
      answertxt: "answer12", 
 
      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="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>

更新

私は明確ではなかったので、私は質問を更新しています。ユーザーがQ1でanswer11を選択すると、Q2が表示されます。ユーザーが回答12を選択すると、Q2は消えますが、Q3は引き続き表示されます。 Q2が表示される唯一の方法は、ユーザーがanswer11を選択する場合です。私は、モデルに入れられているものに基づいて質問間の依存関係を作成しようとしています。

答えて

0

ただ、イテレータを作る、そしてあなたが質問に答えるたびにインクリメント - そのような:

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

 

 
app.controller('MainCtrl', ['$scope', 
 
    function($scope) { 
 
    $scope.questionNo = 0; 
 

 
    $scope.questions = [{ 
 
     questiontxt: 'Please select your Age range', 
 
     qid: 1234, 
 
     Answer: [{ 
 
      answertxt: "answer11", 
 
      aId: 83493, 
 
      removes: [{ 
 
       qid: 4321, 
 
       }] 
 
     }, { 
 
      answertxt: "answer12", 
 
      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 
 
     }] 
 
     } 
 
    ]; 
 

 
    $scope.incrementQuestionNo = function() { 
 
     if ($scope.questionNo != $scope.questions.length-1) 
 
     { 
 
      $scope.questionNo++; 
 
     } 
 
    } 
 
    } 
 
]);
<!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="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div> 
 
    <div class="row"> 
 
     <br/><span>Q{{questionNo+1}}. {{questions[questionNo].questiontxt}}</span> 
 
    </div> 
 
    <div ng-repeat="answer in questions[questionNo].Answer"> 
 
     <input type="radio" ng-model="questions[questionNo].selectedAnswer" ng-change="incrementQuestionNo()" ng-value="{{answer.answertxt}}" />{{answer.answertxt}} 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

ところで、NG-値と値がmutally排他的です。このanswerを読んでください。

0

質問の配列にbool値を指定してプロパティを表示/非表示に追加します。それに応じてng-changeを使用して更新してください。

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

 

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

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

 
    $scope.updateQuestions = function(index){ 
 
     // you write the rest 
 
     // use the index to get the current question 
 
     // get the selected answer 
 
     // set the next question's show to true or false 
 

 
     // for example (not a solution) 
 
     if(index === 0){ 
 
      $scope.questions[1].show = true; 
 
     } 
 
    } 
 
    } 
 
]);
<!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="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="question in questions track by $index"> 
 
    <div ng-if="question.show"> 
 
    <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}}" ng-change="updateQuestions($index)" />{{answer.answertxt}} 
 
    </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>