当前位置: 首页 > 面试题库 >

ng-repeat角的随机排列数组

慕宏儒
2023-03-14
问题内容

我正在创建一个测验,每当我开始测验时,我都希望将问题打乱,以免每次出现时都不会以相同的顺序出现。

我在我的html代码中有这个:

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


    });

}])
;

不幸的是,这根本没有用。希望有人可以帮助我吗?


问题答案:

谢谢
http://bost.ocks.org/mike/shuffle/
使用此改组功能:

它的特殊之处在于,输入数组保持可绑定性,因为改组不会创建新的数组,而是 对同一引用 执行改组。

// -> 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的方法_.shuffle(array)也不起作用,因为它们正在创建破坏绑定的新数组(因此,经过改组的数组不会触发模型变脏)

要完成有效解决方案的答案,应执行以下步骤:

  • 复制该函数,以便可以在控制器中使用它。
  • $http结果回调中调用它:
    $http.get('json/questions.json').success(function (data) {
      //all questions
      $scope.questions = data;

      shuffleArray($scope.questions);

      ...
    }


 类似资料:
  • 随机排列指定数组的值,返回一个新的数组。 使用 Fisher-Yates 算法 对数组元素进行重新排序。 const shuffle = ([...arr]) => { let m = arr.length; while (m) { const i = Math.floor(Math.random() * m--); [arr[m], arr[i]] = [arr[i],

  • 问题内容: 我有此数据: 当我通过ng- repeat按id或按年龄排序时,它会将数字排序为文本。由于我找不到它写的任何地方的问题,所以我猜我的代码有问题。我创建了这个小提琴:http : //jsfiddle.net/vsbGH/1/很抱歉,该模板,但jsfiddle不允许在html框中使用。无论如何,这是加载和排序数据的代码: 这是模板的ng-repeat部分: 非常感谢您能帮助我理解为什么数

  • 问题内容: 我一直在谷歌上寻找答案,但似乎找不到一个万无一失的东西,而且真的负担不起将其弄乱(进入生产站点)。 我所拥有的是具有20多个过滤器的高级搜索,它返回一个包含ID和Distance的数组。我需要做的是将这些结果混洗以每次随机显示。目前我得到的数组是: 我需要做的是每次都对它们进行随机化或排序,但要保持id和距离对,即: 谢谢 :) 问题答案: 在第一个用户后下的文件: 在保留键,值对的同

  • 问题内容: 有没有什么好方法可以使用angular过滤列表而不使用ng- repeat?我不想首先使用javascript绘制列表,但是之后我想使用angular对其进行过滤。 例: 我想使用搜索框来过滤现有的html。 (一般请不要使用ng-repeat或jQuery给出任何示例) 问题答案: 您可以编写一个简单的指令来处理显示/隐藏: 并以这种方式使用它: 使用指令有两个好处: 1)。您不必在

  • 本文向大家介绍JavaScript数组随机排列实现随机洗牌功能,包括了JavaScript数组随机排列实现随机洗牌功能的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript数组随机排列实现随机洗牌功能的方法。分享给大家供大家参考。具体分析如下: 这段JS代码可以对数组内的元素进行随机排列,这个非常有用,比如我们在玩扑克牌的时候可以让扑克牌进行排列,也就是电脑洗牌。 希望本文所

  • 问题内容: 我有一个带有不同事件的JSON对象,如下所示: 该对象存储在我的控制器的$ scope.events中。 现在,我循环此数组以构建事件列表: 我的目标是每天将{{event.date}}作为列表分隔符显示一次。因此,在此示例中,它应如下所示: 2014-11-04(分隔线) 第一次进入 第二次进入 2014-11-05(分隔线) 第三次进入 2014-11-06(分隔线) 第四次进入