(AngularJS) Как случайным образом упорядочить детей в div без ng-repeat

Question

Я делаю простейшее приложение для викторин, и данные JSON, полученные от моего клиента, не позволяют мне повторить варианты на странице викторин. У меня есть шесть статических элементов, которые отображают мой выбор на основе отфильтрованных данных с предыдущих страниц (выбор категории и т. Д.). Не упорядочивая эти элементы случайным образом, выбор победителя всегда остается на одном месте.

Я хотел бы сделать это, используя свойство упорядочения Flexbox в CSS. Я хочу генерировать случайные числа от 1 до 6, а затем назначать их каждому выбору. Я думал, что ng-style будет моим другом здесь, и я мог бы просто вызвать функцию для каждого выбора, которая будет выдавать случайное число от 1 до 6 и назначать свойство порядка CSS этому случайному числу.

Я был в состоянии вызвать функцию для каждого выбора, но он присваивает одно и то же "случайное" число каждому элементу, что не поможет. Я в основном хочу сделать что-то вроде следующего, но оно выдает либо ошибку бесконечного дайджест-цикла, либо ошибку "a.replace не является функцией".

Я буду бесконечно счастлив, если кто-то может мне помочь с этим. Спасибо!!

AngularJS:

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

HTML:

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

Answer 1

Обдумывать вещи как обычно...

Я смог заставить это работать, используя простой старый JS. Я думаю, что проблема, с которой я столкнулся, заключалась в том, что функция randomize вызывалась до того, как элементы в DOM были загружены, поэтому я установил для нее тайм-аут, и теперь, похоже, он работает нормально.

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