获取ng-repeat angular中的随机数

时间:2015-04-26 08:29:50

标签: javascript angularjs

我需要在循环角度中获得一个随机数。我在我的模板中试过这个:

   <div ng-app="app" ng-controller="Base" >
    <div ng-repeat="item in items">
      <img ng-src="/img/img{{getRandomImg()}}.png"> 
    </div>
   </div>

在我的Base控制器中运行:

$scope.getRandomImg = function(){
    return Math.floor((Math.random()*3)+1);
}

当我的页面加载时我有错误: $ rootScope:infdig Infinite $ digest Loop

我也尝试使用指令

执行此操作
app.directive('randomImage', [
    function() {
        return {
            restrict: 'A',
            link: function($scope, element, attrs) {
                var rand = Math.floor((Math.random()*3)+1);

                $(element).attr('src', '/img/tracks/trackimg'+rand+'.png');
            }
        }

    }
]);

在我的模板中:

 <div ng-app="app" ng-controller="Base" ng-repeat="item in items">
      <img data-random-image=""> 
 </div>

它几乎正常工作。但是当我在控制器中更新items时,不是重新生成的图像,而是保持不变。为什么呢?

2 个答案:

答案 0 :(得分:0)

这是来自角度文档:

“当应用程序的模型变得不稳定并且每个$摘要周期触发状态更改和随后的$摘要周期时,会发生此错误.Angular会检测到这种情况并阻止无限循环导致浏览器无响应。

例如,可以通过在路径上设置监视并随后在值更改时更新相同路径来实现这种情况。“

<div ng-repeat="user in getUsers()">{{ user.name }}</div>

...

$scope.getUsers = function() {
  return [ { name: 'Hank' }, { name: 'Francisco' } ];
};

问题出在“items”数组中。 阅读:https://docs.angularjs.org/error/ $ rootScope / infdig

答案 1 :(得分:0)

我相信你的问题是你在重复var conStr = ( from css in ConfigurationManager.ConnectionStrings where !(css.Name == "LocalSqlServer" || css.Name == "LocalMySqlServer") select new ConnectionString { name = css.Name, conString = css.ConnectionString, provider = css.ProviderName, } ).ToList(); &amp;使用ng-controller

ng-app指令的次数过多
ng-repeat