我正在尝试用Angular创建一个Metro Tile类型的网格,以实现这一点,我希望每个tile都是不同的颜色.所以我的行动计划是创建一个随机选择一个循环内的颜色(使用ng-repeat)的功能.这是我到目前为止….
<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText">
<div >
<h6>{{stockRecord.ProductGroupName}}</h6>
</div>
</div>
所以你可以看到我正在使用一个名为RandomColourClass的函数设置类名,这里是JS位
$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}];
$scope.RandomColourClass = function(){
var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)];
return randomColour.colour.toString();
};
这一切都很好,瓷砖是不同的颜色,但我不断收到以下错误
Error: 10 $digest() iterations reached. Aborting!”.
我已经看过关于这个问题的其他帖子,但是我无法弄清楚我需要改变什么才能使它发挥作用！任何帮助或方向将非常感谢:)
解决方法
当您的数据更改时,Angular会执行摘要功能来更新DOM.
在摘要中,它会重新计算DOM中绑定的所有值,{{RandomColorClass()}}.如果其中任何一个更改,它将再次执行摘要循环(例如,某些变量可能取决于更改的变量的值).
它反复执行,直到一行中的两个摘要产生相同的值 – 即没有任何变化.
发生的情况是,当消息发生时,您的RandomColorClass()函数将被调用并返回一个不同的值.这触发了一个附加摘要,其中RandomColorClass()再次返回一个不同的值,这触发另一个摘要…
你能看看这是怎么回事？您不应该以这种方式生成随机值 – 而是在范围内生成它们并持久化它们.
在您的范围内可能有一种方法：
function randomColourClass() { /* ... */ };
$scope.GridStockRecords.forEach(function(record) {
record.colorClass = randomColourClass();
});
和HTML：
<div ng-repeat="stockRecord in GridStockRecords | filter:searchText"
ng-class="stockRecord.colorClass">
<div>
<h6>{{stockRecord.ProductGroupName}}</h6>
</div>
</div>