以 ng-repeat 角度随机排列数组 [英] shuffle array in ng-repeat angular

问题描述

我正在创建一个测验，每次开始测验时，我都想对问题进行随机排列，以免它们每次都以相同的顺序出现.

我的 html 代码中有这个:

<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"><输入类型=收音机"ng-click="checked(answer)">{{answer.answer}}
<!--input id="nextQuestion";类型=按钮"ng-click="next()";值={{buttonText}}"-->

这在我的控制器中

 lycheeControllers.controller('quizCtrl', ['$scope', '$http', function ($scope, $http) {$http.get('json/questions.json').success(function (data) {//所有问题$scope.questions = 数据；$scope.title = "检查你对荔枝的了解";$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..

解决方案

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 角度随机排列数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！