使用ng-repeat分配随机样式值

时间:2015-05-19 09:23:48

标签: angularjs

我用$ http调用提取用户列表,我会在div中显示每个随机名称:

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

对于每个div,我会随机更改样式值(顶部,左侧宽度和高度)。怎么可能?我看到使用ng-class-even和odd,但是对于很多结果我有重叠的div!

2 个答案:

答案 0 :(得分:0)

您可以使用ng-repeat和ng-class来获取随机值,您应该使用控制器中的函数来生成随机类。您可以同时使用ng-class和class作为div。把应该在class属性中所有div中的那些和ng-class属性中的随机值放在一起:

HTML:

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

控制器:

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

答案 1 :(得分:0)

随机出错,这是我的控制器:

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!")})

这是我的模板:

<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>

错误是错误参考/ $ rootScope / infdig为什么?!