OrderBy random in ng-repeat

Question

I have a ng-repeat who loop on users.

JSON :

$scope.peoples = {
    "users": [{
        "name": "Quentin",
        "id": 0,
        "email": "toto@gmail.com",
        "points": "0",
        "sneakers": [{
            "name": "Jordan 1",
            "img": "https://www.flightclub.com/media/catalog/product/cache/1/image/800x570/9df78eab33525d08d6e5fb8d27136e95/8/0/800564_1.jpg"
        }, {
            "name": "Dunk",
            "img": "https://sneakerbardetroit.com/wp-content/uploads/2015/06/nike-sb-dunk-low-primitive-p-rod-2.jpg"
        }, {
            "name": "SB",
            "img": "http://www.nozbone.com/media/catalog/product/cache/1/small_image/295x/040ec09b1e35df139433887a97daa66f/n/i/nike-sb-blazer-vapor-black-white.jpg"
        }, {
            "name": "Air Max",
            "img": "http://www.chausport.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/1/1/11637-chaussures-nike-air-max-95-ultra-essential-grise-vue-exterieure.png"
        }]
    }, ... ]

And the HTML :

   <div class="battle">
        <div class="battle_block" ng-repeat="user in users | limitTo: 2 | orderBy: random">
            <h3>{{user.name}}</h3>
            <span>{{user.points}}</span>
            <button ng-click="vote(user)">Vote</button>
        </div>
    </div>

And the random filter inside my controller (founded in another Stackoverflow post) :

$scope.random = function() {

    return 0.5 - Math.random();

};

My problem is the ng-repeat always begin by the both same users who are the first in the json (Quentin &the second one). I would like to begin by random users everytime, but for the moment, I didn't succeed.

do not include both tags `angular` `==>` `angular 2.X and above` — Aravind, May 01 '17 at 10:22
I probably wouldn't go about this the way you're doing it. I would probably take the incoming data, randomize it into a new array, then bind that array into your ng-repeat. — Tim Consolazio, May 01 '17 at 10:24
Possible duplicate of [shuffle array in ng-repeat angular](http://stackoverflow.com/questions/20789373/shuffle-array-in-ng-repeat-angular) — Yury Tarabanko, May 01 '17 at 10:25

score 4 · Answer 1 · answered May 01 '17 at 10:27

4

Try with this one:

ng-repeat="user in randomList(users) ..."`

$scope.randomList = function(list) {
    return list.sort(function() {
        return 0.5 - Math.random();
    });
}

You can also create a random filter and use this filter inside the ng-repeat.

answered May 01 '17 at 10:27

quirimmo

9,800
3
30
45

You're welcome :) If you're going to use random order multiple times, I suggest you to use a filter for a better code arranging – quirimmo May 01 '17 at 10:39

Sachila Ranawaka · Answer 2 · 2017-05-01T10:28:38.163

3

Instead of using order by, loop over a function and return random elements

<div class="battle">
        <div class="battle_block" ng-repeat="user in ::random(users) | limitTo: 2>
            <h3>{{user.name}}</h3>
            <span>{{user.points}}</span>
            <button ng-click="vote(user)">Vote</button>
        </div>
</div> 

$scope.random = function(array) {
  return array.sort(function() {
    return  0.5 - Math.random();
  });
}

edited May 01 '17 at 10:28

answered May 01 '17 at 10:25

Sachila Ranawaka

39,756
7
56
80

3

I suggest one-time binding (i.e `user in ::random(users)`) to avoid https://docs.angularjs.org/error/$rootScope/infdig - But I think this answer is correct – Alon Eitan May 01 '17 at 10:26
@Quentin Icky no prob – Sachila Ranawaka May 01 '17 at 10:30
As @sachilaranawaka said, I have some "10 $digest() iterations reached. Aborting!". I used one-way binding with ::random but I still have the error. But it works ! – Nitneq May 01 '17 at 10:34
1

@QuentinIcky Make sure you're using angularjs1.3+ ([Reference](https://angularjs.blogspot.co.il/2014/10/angularjs-130-superluminal-nudge.html)) - If not - don't use function - `$scope.random = array.sort(function() { return 0.5 - Math.random(); })` and in the view change it to `user in random` - This error is evil – Alon Eitan May 01 '17 at 10:35
@AlonEitan Yes I use 1.5.8 – Nitneq May 01 '17 at 10:40
@QuentinIcky In that case, try the second suggestion (without the function), don't ignore this error, it indicate severe issues performance-wise – Alon Eitan May 01 '17 at 10:41
When you said the scd solution, you talk about this : `$scope.random = array.sort(function() { return 0.5 - Math.random(); })` ? When I try it I have an error : 'array is not defined'. – Nitneq May 01 '17 at 10:49
@QuentinIcky Yeah, because it's the value that was originally passed to the function, change `array` to `$scope.users` – Alon Eitan May 01 '17 at 10:52

OrderBy random in ng-repeat

2 Answers2