分隔为 ng-repeat 以进行随机迭代

Question

我需要创建一个包含分隔符的 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>

当我在 ng-if 中指定 2 的精确值时效果很好。它向我显示了这样的结果。

第 1 个人
第 2 个人
--分隔符--
第 3 个人
第 4 个人
--分隔符--
第 5 个人
等...

但是如何动态指定这个系数呢？我添加了一个函数来生成 2、3 和 4 之间的随机数。

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

但是当我尝试更改硬编码值时，我看不到理想的结果。 None 这些解决方案有效。 Neigher 简单的函数调用。

ng-if="($index + 1) % getNumber() === 0"

也没有 ng-init 变体。

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

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

如何实现这个功能？

Answer 1

试试这个（一些重构）：

<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 2

需要一点小改动。在你的 ng-if 中调用一个函数，它调用 getNumber 函数和 returns 条件 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>

Answer 3

问题出在无限$digest循环，这是由于getNumber函数returns随机结果造成的，所以[=41= 】无法稳定自己。要为每个 ng-repeat 迭代只计算一次 getNumber，您可以使用 ng-init 指令，就像您已经做过的那样（可能是您的代码由于拼写错误而无法运行：repeat-start而不是 ng-repeat-start):

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);
    }
}])

<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>

另一种解决方案是 "cache" getNumber 函数的结果，例如 person 实体：

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));
    }
}])

<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-repeat-start="person in persons">
    <p>{{person.name}}</p>
  </li>
  <li ng-repeat-end ng-if="($index + 1) % getNumber(person) === 0">
    <p>--divider--</p>
  </li>
</ul>

分隔为 ng-repeat 以进行随机迭代

Divider into ng-repeat for random number of iterations

angularjs

angularjs-ng-repeat