生成采用了棱角分明的NG-重复随机颜色 [英] generating random colors using angular ng-repeat
本文介绍了生成采用了棱角分明的NG-重复随机颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何生成的NG-重复随机颜色。
我想在下面的方式,但没有工作。
我收到的错误,他说:
错误:[$ rootScope:infdig] 10 $摘要()迭代到达。中止!
控制器
$ scope.getRandomColor =功能(){
返回{
borderLeft:2px的固体#+ Math.floor((的Math.random()* 6)+1)
}
};
视图
< DIV NG重复=客户在customerData级=COL-SM-3>
< DIV CLASS =联系箱NG式=getRandomColor()>
< / DIV>
< / DIV>
解决方案
下面是一个工作的jsfiddle 一>:
HTML
< DIV NG-应用=对myAppNG控制器=假>
< DIV NG重复=客户在customerData级=COL-SM-3>
< DIV CLASS =联系箱NG式=customer.color>&安培; NBSP; {{customer.name}}有:{{customer.color}}< / DIV>
< / DIV>
< / DIV>
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"> {{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屋!
查看全文