生成采用了棱角分明的NG-重复随机颜色 [英] generating random colors using angular ng-repeat

问题描述

如何生成的NG-重复随机颜色。
我想在下面的方式，但没有工作。

我收到的错误，他说：

 错误：[$ rootScope：infdig] 10 $摘要（）迭代到达。中止！
 

控制器

  $ scope.getRandomColor =功能（）{
        返回{
            borderLeft：2px的固体＃+ Math.floor（（的Math.random（）* 6）+1）
        }
    };
 

视图

 ＆LT; D​​IV NG重复=客户在customerData级=COL-SM-3＆GT;
    ＆LT; D​​IV CLASS =联系箱NG式=getRandomColor（）＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

下面是一个工作的jsfiddle ：

HTML

 ＆LT; D​​IV NG-应用=对myAppNG控制器=假＆GT;
    ＆LT; D​​IV NG重复=客户在customerData级=COL-SM-3＆GT;
        ＆LT; D​​IV CLASS =联系箱NG式=customer.color＆GT;＆安培; NBSP; {{customer.name}}有：{{customer.color}}＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JS：

  angular.module（'对myApp'，['ngSanitize']）
    .controller（'假'，['$范围'，函数（$范围）{    VAR getRandomColor =功能（）{
        返回{
            borderLeft：2px的固体＃+ Math.floor（的Math.random（）* 16777215）的ToString（16）
        }
    };    $ scope.customerData = [{
        名称：迈克
        颜色：getRandomColor（）
    }，{
        名称：汤姆，
        颜色：getRandomColor（）
    }];}]）;
 

How to generate random colors in ng-repeat. i tried in the following way, but not working.

I am getting error, saying:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

controller

$scope.getRandomColor = function(){
        return {
            borderLeft: '2px solid # '+Math.floor((Math.random()*6)+1)
        }       
    };

view

<div ng-repeat="customer in customerData" class="col-sm-3">
    <div class="contact-box" ng-style="getRandomColor()">
    </div>
</div>

解决方案

Here is a working JSFiddle:

HTML:

<div ng-app="myApp" ng-controller="dummy">
    <div ng-repeat="customer in customerData" class="col-sm-3">
        <div class="contact-box" ng-style="customer.color">&nbsp; {{customer.name}} got: {{customer.color}}</div>
    </div>
</div>

JS:

angular.module('myApp', ['ngSanitize'])
    .controller('dummy', ['$scope', function ($scope) {

    var getRandomColor = function () {
        return {
            borderLeft: '2px solid #' + Math.floor(Math.random()*16777215).toString(16)
        }
    };

    $scope.customerData = [{
        name: "Mike",
        color: getRandomColor()
    }, {
        name: "Tom",
        color: getRandomColor()
    }];

}]);

这篇关于生成采用了棱角分明的NG-重复随机颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！