![quiz]( "quiz")
本文介绍了以 ng-repeat 角度随机播放数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个测验，每次开始测验时，我都想对问题进行随机排列，以便它们不会每次都以相同的顺序出现.
我的 html 代码中有这个:
<div id="question">{{question.question}}</div><img id="nextImg" ng-src="../app/img/next.png" ng-click="下一个()"/><img class="quizImg" ng-hide="{{question.image}}==null" ng-src="{{question.image}}"/><div class="answer" ng-repeat="answer in question.answers"><input type="radio" ng-click="checked(answer)">{{answer.answer}}
<!--input id="nextQuestion" type="button" ng-click="next()" value="{{buttonText}}"-->
这在我的控制器中
lycheeControllers.controller('quizCtrl', ['$scope', '$http', function ($scope, $http) {$http.get('json/questions.json').success(function (data) {//所有问题$scope.questions = 数据；$scope.titel = "检查你对荔枝的了解"$scope.randomSort = 函数(问题){返回 Math.random();};//过滤获取答案/问题$scope.ids = 函数(问题){返回 question.id == number;}$scope.find = 函数 (id) {如果(id == 数字){返回真；}}$scope.next = 函数 () {if (!(number == (data.length))) {//问题ID++;数字++；如果(正确==真){积分++；}//警报(点)；} 别的 {如果(！结束){如果(正确==真){积分++；结束 = 真；}}alert("测验完成:您的总分是:" + 分);}正确 = 错误；}$scope.checked = 函数(答案){//警报(答案.答案)；如果(答案正确==是"){正确=真；} 别的 {正确 = 错误；}//警报(正确)；}});}]);
不幸的是，这根本不起作用..希望有人能帮我解决这个问题吗?
解决方案
感谢 http://bost.ocks.org/mike/shuffle/使用这个改组函数:
它的特殊之处在于，输入数组保持可绑定，因为混洗不会创建新数组，而是在同一引用上进行混洗.
//->Fisher-Yates 洗牌算法var shuffleArray = 函数(数组){var m = array.length, t, i;//虽然还有元素要洗牌而(米){//选择一个剩余的元素...i = Math.floor(Math.random() * m--);//并将其与当前元素交换.t = 数组[m];数组[m] = 数组[i];数组[i] = t;}返回数组；}
旁注: lodash 的 _.shuffle(array) 也不起作用，因为它们正在创建一个破坏绑定的新数组(因此洗牌的数组不会触发模型脏)
要完成对有效解决方案的回答，应执行以下步骤:
- 复制该函数，以便您可以在控制器中使用它.
- 在您的
$http 结果回调中调用它:
$http.get('json/questions.json').success(function (data) {//所有问题$scope.questions = 数据；shuffleArray($scope.questions);...}
I'm creating a quiz and every time I start the quiz I want to shuffle the questions, so that they won't appear in the same order every time.
I have this in my html code:
<div ng-repeat="question in questions | filter:ids | orderBy:randomSort">
<div id="question">{{question.question}}</div><img id="nextImg" ng-src="../app/img/next.png" ng-click="next()" />
<img class="quizImg" ng-hide="{{question.image}}==null" ng-src="{{question.image}}" />
<div class="answer" ng-repeat="answer in question.answers">
<input type="radio" ng-click="checked(answer)">{{answer.answer}}
</div>
<!--input id="nextQuestion" type="button" ng-click="next()" value="{{buttonText}}"-->
</div>
and this in my controller
lycheeControllers.controller('quizCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('json/questions.json').success(function (data) {
//all questions
$scope.questions = data;
$scope.titel = "Check your knowledge about lychees"
$scope.randomSort = function(question) {
return Math.random();
};
//filter for getting answers / question
$scope.ids = function (question) {
return question.id == number;
}
$scope.find = function (id) {
if (id == number) {
return true;
}
}
$scope.next = function () {
if (!(number == (data.length))) {
//questionId++;
number++;
if (correct == true) {
points++;
}
//alert(points);
} else {
if (!end) {
if (correct == true) {
points++;
end = true;
}
}
alert("Quiz finished: your total score is: " + points);
}
correct = false;
}
$scope.checked = function (answer) {
//alert(answer.answer);
if (answer.correct == "yes") {
correct = true;
} else {
correct = false;
}
//alert(correct);
}
});
}])
;
unfortunately this isn't working at all.. Hope someone can help me with this one?
解决方案
Thx to http://bost.ocks.org/mike/shuffle/use this shuffling function:
Speciality with it is, that the input array stays bindable because the shuffling wont create a new array but instead does the shuffling on the same reference.
// -> Fisher–Yates shuffle algorithm
var shuffleArray = function(array) {
var m = array.length, t, i;
// While there remain elements to shuffle
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
side note: lodash's _.shuffle(array) does not work either because they are creating a new array which breaks binding (so a shuffled array won't trigger the model to be dirty)
To complete the answer to a working solution, following steps should do it:
- copy the function so you can use it inside your controller.
- call it in your
$http result callback:
$http.get('json/questions.json').success(function (data) {
//all questions
$scope.questions = data;
shuffleArray($scope.questions);
...
}
这篇关于以 ng-repeat 角度随机播放数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！