Use ng-repeat assign random style value

Question

Im extract list of users with $http call, and I would display random name each inside a div like that:

<div class="circle colorxxx x6" style="top:197px;left:168px;width:110px;height: 110px"></div>

For each div I would change random the style value (top, left width and height). How is possible? I see the use of ng-class-even and odd, but for many result I have overlapping divs!

possible duplicate of [Place random non-overlapping rectangles on a panel](http://stackoverflow.com/questions/716558/place-random-non-overlapping-rectangles-on-a-panel) — smnbbrv, May 19 '15 at 09:31

score 0 · Answer 1 · answered May 19 '15 at 09:37

0

You could use ng-repeat and ng-class for this, to get random values you should use a function in your controller to generate the random classes. You can use both ng-class and class for the div. Put the ones that should be in all divs in class attribute and the random ones in the ng-class attribute:

HTML:

<div ng-class="getRandomClass()" class="circle" style="top:197px;left:168px;width:110px;height: 110px" ng-repeat="user in users"></div>

Controller:

$scope.getRandomClass = function() {
    // Generate random string to set as class
}

answered May 19 '15 at 09:37

Håkan Fahlstedt

2,040
13
17

nice idea.... im not so familiar for get Random.... is like something that? $scope.getRandomClass = function() {var show = myShows[Math.floor(Math.random() * myShows.length)];} – DigitalXP May 19 '15 at 10:08
Something like that was what I was aiming at. – Håkan Fahlstedt May 19 '15 at 10:20

score 0 · Answer 2 · answered May 19 '15 at 10:42

There is an error with random, this is my controller:

var myShows = ['fucsia x1','violetto x2','celeste x3','arancio x4','rosso x5'];
    $scope.getRandomClass = function() {
        return myShows[Math.floor(Math.random() * myShows.length)];
    }
    $http.post('http://www.mimanchitu.it/ap/include/user_rand.asp')
    .success(function(ut){$scope.uts = ut;})
    .error(function(){alert("Errore di connessione!")})

An this is my template:

<div ng-repeat="ut in uts" style="background-image:url({{ut.avatar}})" class="circle" ng-class="getRandomClass()"><a href="#/app/showprof/{{ut.id}}/" class="secondary-content">{{ut.name}}</a></div>

The error is Error Reference / $rootScope / infdig why?!

Use ng-repeat assign random style value

2 Answers2