-1

I am making a basic trivia application and the JSON data I've received from my client doesn't allow for me to ng-repeat the choices on the trivia page. I have six static elements that display my choices based on filtered data from the previous pages (category selection, etc.). Without ordering these elements randomly, the winning choice is always in the same spot.

I would like to accomplish this using Flexbox's "order" property in CSS. I want to generate random numbers between 1 and 6 and then assign them to each choice. I was thinking that ng-style would be my friend here, and I could simply call a function for each choice that will spit out a random number between 1 and 6 and assign the CSS order property to that random number.

I have been able to call a function on each choice, but it assigns the same "random" number to each element, which is no help. I basically want to do something like the following, but it throws either an infinite digest loop error or an "a.replace is not a function" error.

I will be INFINITELY happy if someone could help me with this. Thank you!!

AngularJS:

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

HTML:

<div ng-style="randomOrder()"></div>
Shane Morris
  • 1
  • 2

1 Answers1

0

Overthinking things as usual...

I was able to get this working using plain old JS. I think an issue I was running into was that the randomize function was being called before the elements in the DOM were loaded, so I set a timeout on it and it seems to be working fine now. 

$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);
Shane Morris
  • 1
  • 2