Question

我在ng-repeat元素中使用ng-class函数。我收到了这个错误。我试图从数组中选择一个随机类。我该如何解决这个问题？

<div class="col-lg-4" ng-repeat="client in allClients">
<div class="someClass" ng-class="getClass()">
//some data
{{client.name}}
</div>
</div>

这是我的JS代码。

$scope.getClass = function() {
var classArray = ['infobox1', 'infobox2', 'infobox3', 'infobox4', 'infobox5', 'infobox6'];
return classArray[Math.floor(Math.random() * classArray.length)];
}

错误继续。观察者在最后5次迭代中被解雇：[[{“msg”：“getBackgroundClass（）”，“newVal”：“infobox4”，“oldVal”：“infobox6”}，{“msg”：“getBackgroundClass（）”，“的newval “：” infobox4" ， “OLDVAL”： “infobox5”}，{ “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox1”， “OLDVAL”： “infobox4”}，{ “msg” 中：” getBackgroundClass（）”， “的newval”： “infobox5”， “OLDVAL”： “infobox1”}，{ “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox1”， “OLDVAL”： “infobox4”}， { “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox6”， “OLDVAL”： “infobox4”}，{ “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox1”， “OLDVAL” ： “infobox5”}，{ “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox1”， “OLDVAL”： “infobox2”}，{ “msg” 中： “getBackgroundClass（）”， “的newval”：” infobox1" ， “OLDVAL”： “infobox4”}]，[{ “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox6”， “OLDVAL”： “infobox4”}，{ “msg” 中：“getBackgroundClass（） “ ”的newval“： ”infobox1“， ”OLDVAL“： ”infobox4“}，{ ”msg“ 中： ”getBackgroundClass（）“， ”的newval“： ”infobox4“， ”OLDVAL“： ”infobox1“}，{” MSG “：” getBackgroundClass（） “ ”的newval“： ”infobox5“， ”OLDVAL“： ”infobox1“}，{ ”msg“ 中： ”getBackgroundClass（）“ 中，” n ewVal “：” infobox4" ， “OLDVAL”： “infobox5”}，{ “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox2”， “OLDVAL”： “infobox6”}，{ “msg” 中：” getBackgroundClass（）”， “的newval”： “infobox6”， “OLDVAL”： “infobox1”}，{ “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox6”， “OLDVAL”： “infobox1”}， { “msg” 中： “getBackgroundClass（）”， “的newval”： “infobox4”， “OLDVAL”： “infobox1”

Answer 1

您想多久选择一个随机课程？目前，您创建了一个无限循环，因为angular会注意到类更改，运行摘要周期以注意其他更改，发现类再次更改，运行摘要周期以注意其他更改，发现类已更改再次，等等......

你想要选择一次随机值，并坚持一段时间：

$scope.randomClass = classArray[Math.floor(Math.random() * classArray.length)]

（随意执行上述代码，您可以随时查看新值）

Answer 2

这是工作示例 http://plnkr.co/edit/pl3W5uNofz123EJZnMT8

当我在allClients中拥有包含所有值的数组时，我创建了一个classes数组，然后使用该数组来分配类

$scope.allClients = [{name: 'client'}, {name: 'client2'}, {name: 'client3'}];
  var classes = $scope.allClients.map(function(client) {
    var classArray = ['infobox1', 'infobox2', 'infobox3', 'infobox4', 'infobox5', 'infobox6'];
    return classArray[Math.floor(Math.random() * classArray.length)];
  });

达到10 $ digest（）次迭代。 ng class？

2 个答案: