我正在尝试做一个简单的语法测验，但在使用 ng-repeat 时无法弄清楚如何对数组进行随机排序。我想同时显示“正确”句子和“不正确”句子，并希望它们随机排序。
您可以在下面查看我的代码 && 数据:
(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>如果您能给我提供使用“提交”按钮找到正确答案的方法，那就太好了!现在，我不知道如何找到检查提交的答案是否等于“正确”的方法。
最佳答案
有一些错误:
<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一旦进入 Controller 即可防止消化问题。我认为，如果您将所有问题(正确和不正确)混合在一个唯一的数组中，处理您的项目会更好。
关于javascript - AngularJS ng-重复随机顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38448450/