AngularJS ng-repeat随机顺序

时间:2016-07-19 02:01:55

标签: javascript html angularjs

我正在尝试进行简单的语法测验,但我在使用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>
&#13;
&#13;
&#13;

另外,如果你能为我提供使用方式&#34;提交&#34;按钮找到正确的答案,这将是美好的!现在,我不知道如何找出方法来检查提交的答案是否等于&#34;正确&#34;之一。

3 个答案:

答案 0 :(得分:1)

有一些错误:

  1. <input>自动关闭标记;

  2. 您忘记在视图中致电function,如下所示:

  3. <div ng-repeat="incorrect_answer in random(question.Incorrect)">
    
    1. 您必须返回在function
    2. 中随机播放的数组
      $scope.random = function(array) {
        return array.sort(function() {
          return .5 - Math.random();
        });
      }
      

      &#13;
      &#13;
      (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);
      &#13;
      <!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>
      &#13;
      &#13;
      &#13;

      修改

      1. 正如 @charlietfl 指出的那样,最好循环整个对象并在控制器中将array洗牌一次,以防止摘要< / em>问题。

      2. 如果您在一个独特的数组中混合所有问题(正确和错误),我认为处理您的商品会更好。

答案 1 :(得分:0)

您可以创建可能答案的列表,随机播放列表并循环播放。您还可以找到正确答案的字段。因此,不要从列表中排除正确答案,而是将它们与其他答案一起包括在内,然后使用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)

答案 2 :(得分:0)

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

或者您可以使用以下帖子中指定的方法。

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

提交数据时,您可以通过多种方式进行验证。

  1. 如果问题的任何或索引与问题数组中的实际正确答案字段进行比较,您可以传递所选单选按钮和问题标识符的值。
  2. 您可以存储问题标识符和所选答案,并将其发送到服务器进行验证。
  3. 我希望它可以帮到你。