（AngularJS）如何在没有 ng-repeat 的情况下随机排序 div 中的子项答案

【问题标题】：(AngularJS) How to randomly order children in a div without an ng-repeat（AngularJS）如何在没有 ng-repeat 的情况下随机排序 div 中的子项
【发布时间】：2016-03-09 08:45:27
【问题描述】：

我正在制作一个基本的琐事应用程序，而我从客户端收到的 JSON 数据不允许我重复琐事页面上的选择。我有六个静态元素，它们根据前几页的过滤数据（类别选择等）显示我的选择。如果不随机排列这些元素，获胜的选择总是在同一个位置。

我想在 CSS 中使用 Flexbox 的“order”属性来完成这项工作。我想生成 1 到 6 之间的随机数，然后将它们分配给每个选项。我在想 ng-style 会是我的朋友，我可以简单地为每个选项调用一个函数，该函数将吐出 1 到 6 之间的随机数并将 CSS order 属性分配给该随机数。

我已经能够在每个选项上调用一个函数，但是它为每个元素分配了相同的“随机”数字，这无济于事。我基本上想做类似以下的事情，但它会引发无限摘要循环错误或“a.replace 不是函数”错误。

如果有人能帮我解决这个问题，我会非常高兴。谢谢！！

AngularJS：

    $scope.randomOrder = function(){
        $scope.randomNum = Math.floor(Math.random() * 6) + 1;
        return{
            "order": $scope.randomNum
        }
    }

HTML：

<div ng-style="randomOrder()"></div>

【问题讨论】：

标签： angularjs random flexbox ng-style

【解决方案1】：

像往常一样想太多……

我能够使用普通的旧 JS 来完成这项工作。我认为我遇到的一个问题是在加载 DOM 中的元素之前调用了 randomize 函数，所以我对其设置了超时，现在它似乎工作正常。

$scope.randomize = function () {
    var parent = $(".container");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
};
$timeout(function() {
    $scope.randomize();
}, 0);

【讨论】：