AngularJS ng-repeat 随机顺序答案

【问题标题】：AngularJS ng-repeat random orderAngularJS ng-repeat 随机顺序
【发布时间】：2016-07-20 03:44:13
【问题描述】：

我正在尝试做一个简单的语法测验，但在使用ng-repeat 时，我无法弄清楚如何对数组进行随机排序。我想同时显示“正确”句子和“不正确”句子，并希望它们随机排序。

您可以在下面查看我的code && data：

(function(angular) {
  'use strict';

  angular.module('demo', ['ngAnimate'])
    .controller('repeatController', function($scope) {
      $scope.random = function() {
        return 0.5 - Math.random();
      };

      $scope.questions = {
        "0": {
          "Category": "Commas",
          "Correct": "Shirley Chisholm was the first major-party candidate to run for President in a major party. She ran as a Democrat.",
          "Given_sen": "\"Shirley Chisholm was the first major party candidate to run for President in a major party, she ran as a Democrat.\"",
          "Incorrect": [
            "\"Shirley Chisholm, the first major-party candidate to run for President in a major party, she ran as a Democrat.\"",
            "Shirley Chisholm was the first major-party candidate to run for President in a major party: she ran as a Democrat.",
            "Shirley Chisholm was the first major-party candidate to run for President in a major party (she ran as a Democrat)."
          ],
          "Question": "Fix the comma splice.",
          "Rule": "comma splice\n"
        },
        "1": {
          "Category": "Commas",
          "Correct": "Hattie McDaniel was the first African-American to win an Oscar. She won for her performance in Gone with the Wind.",
          "Given_sen": "\"Hattie McDaniel was the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
          "Incorrect": [
            "Hattie McDaniel was the first African-American to win an Oscar: she won for her performance in Gone with the Wind.",
            "\"Hattie McDaniel, the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
            "\"Hattie McDaniel was the first African-American to win an Oscar, for her performance in Gone with the Wind.\""
          ],
          "Question": "Fix the comma splice.",
          "Rule": "comma splice\n"
        }
      };
    });
})(window.angular);

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body ng-app="demo">
  <div ng-controller="repeatController">
    <form ng-repeat="question in questions">
      <div class="well"><b> QUESTION: {{question.Question}}</b>
        <br> Category: {{question.Category}} </div>
      <div ng-repeat="incorrect_answer in question.Incorrect">
        <input type="radio" name="radio{{$parent.$index}}" value="{{incorrect_answer}}">{{incorrect_answer}}</input>
      </div>
      <div>
        <input type="radio">{{question.Correct}} </input>
      </div>
      <input type="submit" value="submit" />
    </form>
  </div>

</body>

</html>

另外，如果你能给我提供使用“提交”按钮找到正确答案的方法，那就太好了！现在，我不确定如何找出检查提交的答案是否等于“正确”答案的方法。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

有一些错误：

<input>是一个自闭合标签；
您忘记在您的视图中调用function，如下所示：

<div ng-repeat="incorrect_answer in random(question.Incorrect)">

您必须返回在您的function 中打乱的数组：

$scope.random = function(array) {
  return array.sort(function() {
    return .5 - Math.random();
  });
}

(function(angular) {
  'use strict';
  
  angular.module('demo', [])
    .controller('repeatController', function($scope) {
      $scope.questions = {
        "0": {
          "Category": "Commas",
          "Correct": "Shirley Chisholm was the first major-party candidate to run for President in a major party. She ran as a Democrat.",
          "Given_sen": "\"Shirley Chisholm was the first major party candidate to run for President in a major party, she ran as a Democrat.\"",
          "Incorrect": [
            "\"Shirley Chisholm, the first major-party candidate to run for President in a major party, she ran as a Democrat.\"",
            "Shirley Chisholm was the first major-party candidate to run for President in a major party: she ran as a Democrat.",
            "Shirley Chisholm was the first major-party candidate to run for President in a major party (she ran as a Democrat)."
          ],
          "Question": "Fix the comma splice.",
          "Rule": "comma splice\n"
        },
        "1": {
          "Category": "Commas",
          "Correct": "Hattie McDaniel was the first African-American to win an Oscar. She won for her performance in Gone with the Wind.",
          "Given_sen": "\"Hattie McDaniel was the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
          "Incorrect": [
            "Hattie McDaniel was the first African-American to win an Oscar: she won for her performance in Gone with the Wind.",
            "\"Hattie McDaniel, the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"",
            "\"Hattie McDaniel was the first African-American to win an Oscar, for her performance in Gone with the Wind.\""
          ],
          "Question": "Fix the comma splice.",
          "Rule": "comma splice\n"
        }
      };

      function sort(array) {
        return array.sort(function() {
            return .5 - Math.random();
        });
      }

      function random() {
        for (var key in $scope.questions) {
          $scope.questions[key].Incorrect = sort($scope.questions[key].Incorrect);
        }
      }
      
      random();
    });
})(angular);

<!DOCTYPE html>
<html ng-app="demo">

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="repeatController">
  <form ng-repeat="question in questions">
    <div class="col-md-12">
      <div class="well"><b> QUESTION: {{question.Question}}</b>
        <br> Category: {{question.Category}} </div>
      <div class="radio" ng-repeat="incorrect_answer in question.Incorrect">
        <label>
          <input type="radio" name="radio{{$parent.$index}}" value="{{incorrect_answer}}"> {{incorrect_answer}}
        </label>
      </div>
      <div class="form-group">
        <label class="radio-inline">
          <input type="radio"> {{question.Correct}}
        </label>
      </div>
      <div class="form-group">
        <input class="btn btn-primary" type="submit" value="Submit">
      </div>
    </div>
  </form>
</body>

</html>

编辑：

正如 @charlietfl 所指出的，最好在控制器中循环遍历整个对象并将 array 洗牌一次，以防止 digest 问题。
我认为如果您将所有问题（正确和错误）混合放在一个唯一的数组中，会更好地处理您的项目。

【讨论】：

询问摘要的严重问题，将函数放在返回随机排序的视图中。应该在控制器中排序，然后传递给视图
@charlietfl，我想过这个.. 你是否建议在控制器中循环所有对象并随机化所有不正确的问题？

【解决方案2】：

我认为您必须创建一系列可能的答案和正确答案，并使用像 https://github.com/coolaj86/knuth-shuffle 这样的随机算法

或者你可以按照下面帖子中指定的方法。

ng-repeat changing sort order on all items when new item added to model

当您提交数据时，您可以通过多种方式对其进行验证。

如果问题的任何或索引与问题数组中的实际正确答案字段相比，您可以传递所选单选按钮和问题标识符的值。
您可以存储问题标识符和选择的答案并将其发送到服务器进行验证。

希望对你有帮助。

【讨论】：

【解决方案3】：

您可以创建一个可能的答案列表，将列表随机排列并循环遍历它们。您还可以设置正确答案的字段。因此，与其从列表中排除正确答案，不如将它们与其他答案一起包含在内，然后使用knuth 之类的算法对其进行洗牌。所以你的模型可能看起来像这样：

$scope.model = {
  randomize: function (arr) {
    return knuthShuffle(arr.slice(0));
  },
  questions: [
    {
      id: 1,
      title: 'Title of the question',
      possibleAnswers: [{ name: 'Tom' }, { name: 'John' }, { name: 'Kim' }, { name: 'Tim' }],
      correctAnswer: { name: 'John' }
    }
  ]
};

然后在您看来，您可以执行以下操作：

<ul>
  <li ng-repeat="question in model.questions">
    <ul>
      <li ng-repeat="possibleAnswer in model.randomize(question.possibleAnswers)">
        {{possibleAnswer}}
      </li>
    </ul>
  </li>
</ul>

为了验证答案，您可以使用字段来存储所选答案并将其传递给后端：

selectedAnswer: {'name': 'John'}

然后控制器上的方法会调用你的服务：

vm.verifyAnswer(model.selectedAnswer, correctAnswer)

【讨论】：