將數據分成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>