使用 ng 重复和 ng 选项处理多个下拉列表中的选定值

Question

<li ng-repeat="questionAndAnswers in questionnaire">
  <select ng-model="selectedAnswer" ng-options="answer as answer.displayText for answer in questionAndAnswers.answers track by answer.value" ng-change="validateAnswers()">
  </select>
</li>

"questionAndAnswer": [{
  "question": "Is your camera fully functional?",
  "answers": [{
    "displayText": "Yes, everything works",
    "value": "Success"
  }, {
    "displayText": "Some of the buttons are broken",
    "value": "Failure"
  }]
}, {
  "question": "Does your camera has any obvious damage?",
  "answers": [{
    "displayText": "No it's perfect",
    "value": "Success"
  }, {
    "displayText": "Yes, there is heavy damage",
    "value": "Failure"
  }]
}]

我正在使用 ng 选项和 ng-repeat，根据问卷的大小（给定的 json 样本）创建多个下拉列表。有人可以建议在validateAnswers（）javascript中获取答案的最佳角度方法，我可以在其中验证用户是否选择了"成功"答案。如果所有答案都是成功，我需要显示成功消息。

Answer 1

我会使用 $index 将答案存储在数组中并在 validateAnswer 函数中验证数组。

在你的 html 中 ： 次要 tweek ：

<li ng-repeat="questionAndAnswers in questionnaire track by $index">
   {{questionAndAnswers.question}}<br>
   <select ng-model="selectedAnswers[$index]" ng-options="answer.value as answer.displayText for answer in questionAndAnswers.answers" ng-change="validateAnswers()">
   </select>
 </li>

在控制器中：

$scope.questionnaire = [{
  "question": "Is your camera fully functional?",
  "answers": [{
    "displayText": "Yes, everything works",
    "value": "Success"
  }, {
    "displayText": "Some of the buttons are broken",
    "value": "Failure"
  }]
}, {
  "question": "Does your camera has any obvious damage?",
  "answers": [
  {
    "displayText": "No it's perfect",
    "value": "Success"
  }, 
  {
    "displayText": "Yes, there is heavy damage",
    "value": "Failure"
  }]
}];
$scope.selectedAnswers = [];  
$scope.validateAnswers = function() {
  console.log($scope.selectedAnswers);
  var allSuccess = true;
  for (i = 0; i < $scope.questionnaire.length; i++) { 
    allSuccess = allSuccess && ($scope.selectedAnswers[i] === 'Success');
  }
  if (allSuccess) {
    $scope.result = 'Congratz! All answers correct!';
  } else {
    $scope.result = '';
  }
}

这是 Plunker 中的一个工作示例

就个人而言，如果您只有这两个值，我会使用布尔值作为您答案的值，而不是字符串"成功"和"失败"。

希望这对您有所帮助。