使用ng-repeat和ng-options从多个下拉列表中处理selectedValues

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

I am creating multiple drop-downs based on the size of questionaire (json sample given) using ng-options and ng-repeat. Could someone please suggest the best angular way to get the answers in validateAnswers() javascript where I may validate if the user has selected "Success" answer. If all the answers are Success, I would need to display a success message.

我使用ng-options和ng-repeat基于questionaire(给出的json示例)的大小创建了多个下拉列表。是否有人能提出在validateAnswers()中获得答案的最佳角度方法，我可以在这里验证用户是否选择了“Success”答案。如果所有的答案都是成功的，我需要显示一个成功的信息。

1 个解决方案

#1

I would use $index to store the answers in an array and validate the array in the validateAnswer function.

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

In your html : minor tweek :

在你的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>

In your controller :

在你的控制器:

$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 = '';
  }
}

Here is a working example in Plunker

这是柱塞中的一个工作示例

Personally I would use booleans as value for your answers instead of strings 'Success' and 'Failure' if you only have these two values.

就我个人而言，如果你只有这两个值，我将使用布尔值作为你的答案的值，而不是字符串'Success'和'Failure'。

Hope this will help you out.

希望这能帮到你。

#1