在洗牌NG-重复角阵 [英] shuffle array in ng-repeat angular

问题描述

我创建一个测验，每次我开始测验的时间我要洗牌的问题，所以他们不会以同样的顺序每一次出现。

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.

我有这个在我的html code：

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>

这在我的控制器

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到的 http://bost.ocks.org/mike/shuffle/
使用此功能洗牌：

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;
}

侧面说明： lodash的 _洗牌（阵列）不工作是因为他们正在创造一个新的数组打破绑定（所以。洗牌阵列不会触发模型是肮脏）

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:

• 复制功能，让您可以在控制器中使用它。


• 调用它在你的 $ HTTP 结果回调：

• 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-重复角阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！