Ng-Repeat Verbergen Radioknopf basierend auf Radio Antwort ausgewählt

Ich brauche Hilfe bei dem Versuch, herauszufinden, wie Antworten ausgeblendet werden, wenn andere Antworten ausgewählt sind, wenn Elemente im ng-repeat-Block sind. Zum Beispiel im folgenden Code. Wenn ein Benutzer Antwort11 in Frage 1 auswählt, dann ist in Frage 2 nur Antwort21 aus den möglichen Antworten verfügbar, die unter der Frage aufgelistet sind.Ng-Repeat Verbergen Radioknopf basierend auf Radio Antwort ausgewählt

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

auf jede Frage zusammen mit ng-disbled und ng-change zu jedem

Radio

Die Methodik der disables überhaupt zu sehen ist:

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]" 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>

Quelle

2017-11-26 user990951

Ein straight-forward Weg, um Ihre ‚Antwort‘ Datenstrukturen mit zwei neuen Arrays sein würde, erweitern ‚versteckt 'und' entfernt ', die bei der Auswahl die gezielten Antworten anderer Fragen deaktivieren oder in einem solchen Fall entfernen würden. Beispiel:

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

Antwort11 blendet Antwort22 aus und löscht Antwort31.
Ihre html würde dann kochen auf die folgende Anzeige Logik nach unten:

<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>

wo die isRemoved und isDisabled Flaggen auf Antwortauswahl in select(question, answer) eingestellt sind.

Vollarbeitsbeispiel:

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>

Quelle

2017-11-26 16:05:12

ich Ihre Lösung versucht, was ich bemerkte, während er verhehlte und das Element entfernen, wenn der Benutzer die Antwort ausgewählt, bevor es hid ist/entfernt es erscheint als Teil der ausgewähltenAnswers. aber es war ein hilfreicher Ausgangspunkt – user990951

Könnte eine Eigenschaft wie hinzufügen oben und dann überprüfen Sie die entsprechende andere Frage und andere a nswer und sieht, ob die aktuell ausgewählte Antwort die selectedAnswer in dem Sperrobjekt entspricht

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>

Quelle

2017-11-26 16:04:17 charlietfl

Ng-Repeat Verbergen Radioknopf basierend auf Radio Antwort ausgewählt

Antwort

Verwandte Themen