将数据分成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
• --divider--
• 人3
• 人4
• --divider--
• 人5
• 等。 。

但是如何动态指定这个系数？我添加了一个功能genereate中2，3和4

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

一个随机数，但是，当我试图改变硬编码值，我不能看到所希望的结果。这些解决方案都不起作用。 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

的问题是与无限$消化循环，这是由事实造成的，即getNumber函数返回随机结果，所以AngularJS不能稳定本身。若要为每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>

另一种解决方案是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>

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是CALS的getNumber功能和返回条件真/假

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>