Question

我需要在其中创建一个带有分隔符的var dataURL = $().cropper('getCroppedCanvas').toDataURL('image/jpeg');次迭代。问题是我必须在每两个，三个或四个元素后随机添加分隔符。我从这段代码开始：

ng-repeat

当我在<li repeat-start="person in persons track by $index"> <p>{{ person.name }}</p> </li> <li ng-repeat-end ng-if="($index + 1) % 2 === 0"> <p>--divider--</p> </li>内指定2的确切值时，它的效果很好。它向我显示了这样的结果。

人1
人2
- 除法器 -
人3
人4
- 除法器 -
人5
等...

但如何动态指定此系数？我添加了一个函数来生成2,3和4中的随机数。

ng-if

但是当我试图改变硬编码值时，我看不到理想的结果。这些解决方案都不起作用。 Neigher具有简单的函数调用。

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

也不是ng-if="($index + 1) % getNumber() === 0"种变种。

ng-init

如何实现此功能？

Answer 1

问题在于 Infinite $ digest Loop ，这是由事实引起的，getNumber函数返回随机结果，因此AngularJS无法稳定自身。要为每个getNumber次迭代仅计算一次ng-repeat，您可以使用ng-init指令，就像您已经做过的那样（由于拼写错误，您的代码可能无法正常工作：{{1而不是repeat-start）：

＆＃13;

ng-repeat-start

＆＃13;

angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
    $scope.persons = [];
    for(var i = 0; i < 20; i++)
      $scope.persons.push({name:'Person ' + i});
      
    $scope.getNumber = function() {
      return Math.floor(Math.random() * 3 + 2);
    }
}])

＆＃13;

另一个解决方案是＆＃34;缓存＆＃34; <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app='app' ng-controller='ctrl'> <li ng-init='temp = getNumber()' ng-repeat-start="person in persons"> <p>{{person.name}}</p> </li> <li ng-repeat-end ng-if="($index + 1) % temp === 0"> <p>--divider--</p> </li> </ul>函数的结果，例如getNumber实体：

＆＃13;

person

＆＃13;

angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
    $scope.persons = [];
    for(var i = 0; i < 20; i++)
      $scope.persons.push({name:'Person ' + i});
            
    $scope.getNumber = function(person) {      
      return person.temp || (person.temp = Math.floor(Math.random() * 3 + 2));
    }
}])

＆＃13;

Answer 2

试试这个（一些重构）：

<li repeat-start="person in persons track by $index">
  <p>{{ person.name }}</p>
  <p ng-if="putDividerHere($index)">--divider--</p>
</li>

$scope.putDividerHere(index) {
    var randomNumber = Math.floor(Math.random() * (3) + 2);
    return ((index + 1) % randomNumber) === 0;
}

Answer 3

需要进行一些小改动。在您的ng-if中调用getNumber函数并返回条件 true / false

HTML：

<li ng-repeat-end ng-if="isShowDivider($index+1)">
  <p>--divider--</p>
</li>

JS：

$scope.isShowDivider = function (index) {
  if (index % $scope.getNumber() !== 0) 
     return false;
  return true;
}

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

编辑表示iterations reached. Aborting错误。

<li ng-repeat="person in persons track by $index">
  <p>{{person.name}}</p>
  <p ng-if="isShowDivider($index+1)">--divider--</p>
</li>

将随机迭代次数分为ng-repeat

3 个答案: