乱数繰り返しのためのng-repeatへの分割器

Question

除算器を使ってng-repeat反復を作成する必要があります。問題は、2つ、3つ、または4つの要素がランダムに繰り返されるたびに除算器を追加する必要があることです。私はこのコードで始めました：

<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
• など。 。

しかしこの係数を動的に指定する方法は？私は2、3及び

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

4の間で乱数をgenereateする機能を追加しました。しかし、私はハードコードされた値を変更しようとすると、私は望ましい結果を見ることはできません。これらのソリューションはどれも動作しません。簡単な関数呼び出しの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

問題はAngularJS自体を安定させることはできませんのでgetNumber機能は、ランダムな結果を返すという、事実によって引き起こされた無限$ダイジェストループ、とありました。

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>

：あなたはすでにやったとして、あなたが（： repeat-start代わり ng-repeat-startのあなたのコードが原因タイポに動作しない可能性がある）、 ng-initディレクティブを使用することができ、各 ng-repeatの反復のために一度だけ getNumberを計算するために、

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>

：

別の解決策は、personエンティティで例えば、getNumber関数の結果を「キャッシュ」することです

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

必要な小さな変更。 iterations reached. Abortingエラーのため

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

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

編集：

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

JS：あなたのng-ifそれはgetNumber機能をCALと条件真/偽

HTMLを返す関数を呼び出します。

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