Question

我想问一下，如何记住Angularjs中的选定答案，这是我的项目（加载问题和答案需要大约2秒）：http://testtest.ueuo.com/，所以稍后，我可以计算最终得分用户可以在提交前查看问题。可以有多个正确的答案。

这是index.html中的答案：

  </div>
       <div ng-repeat="answer in answers track by $index" ng-if="answer != ''"  class="{{selected}}" ng-click="addToAnswers(currentPage,$index)" >
   {{answer}}
         </div>
  </div>

这是在控制器中：

 $scope.addToAnswers = function(questionID ,$index) {
        if(this.selected == 'selected')this.selected = false;
        else this.selected = 'selected';
        console.log("Index clicked " + $index + " id: " + questionID + " selected: " + this.selected);
    }

我在css

中选择了。选中的答案

Answer 1

$index每次从0开始，所以每次选择索引时都会保留0,1,2，结果你的类保持选中状态（角度很难理解元素有变了）。使用track by answer.id因此它会在每个页面上发生变化。

当您推送user_answers模型时，请勿使用$index的索引

我实际上是这样做的方法是将user_answers作为一个对象，并且用户的每个答案都会添加一个属性，其中问题ID为关键字，答案为值。

所以每次你有这样的模型：

ng-model="user_answers[question.id]" ng-class="{selected: user_answers[question.id].id == answer.id }"

或类似的东西。

在您不使用ng-model指令的情况下，您可能希望执行以下操作，还必须为要使用的问题ID创建$ scope变量它位于ngClick，如下所示：

$scope.user_answers = {};
$scope.addToAnswers = function(questionID, answer) {
    $scope.user_answers[questionID] = answer;
}

并在视图中

ng-click="addToAnswers(questionId, answer)" ng-class="{selected: user_answers[question.id] == answer }"

更新

对于多个正确答案，特定问题中的答案必须保存在数组中：

$scope.toggleAnswers = function(questionID, answer) {
  if (angular.isUndefined($scope.user_answers[questionID])) {
    $scope.user_answers[questionID] = [];
  }
  if ($scope.checkSelected(questionID, answer)) {
    var i = $scope.user_answers[questionID].indexOf(answer)
    $scope.user_answers[questionID].splice(i,1);
  } else {
    $scope.user_answers[questionID].push(answer);
  }
  //$scope.localStorage.setItem('answers', angular.toJson(answers));
}

并检查是否已检查答案：

$scope.checkSelected = function(questionId, answer) {
  if (angular.isUndefined($scope.user_answers[questionId])) { 
    return false;
  }
  return $scope.user_answers[questionId].indexOf(answer) !== -1;
}

现在checkSelected也可以使用ngClass：

ng-class="{selected: checkSelected(CurrentQuestionId, answer)}"

PS。 imo验证，正确答案必须驻留在服务器上，否则有人可以作弊。

Answer 2

如果它靠近SPA，您可以扩展您的控制器和addToAnswers功能，如下所示：

$scope.answers = [];

$scope.addToAnswers = function(questionID ,$index) {
    $scope.answers.push({index: $index, id: questionID});
}

这将向answers数组添加一个项目，存储索引和问题ID。

Angularjs，如何保存所选项目

2 个答案:

更新