AngularJSで配列の数値分の★の繰り返しを入れ子のng-repeatで表示

AngularJSで配列の数値分の繰り返しを入れ子のng-repeatで表示

配列の数値の表示と数値分の繰り返し

例えば下記のような配列があってその数値の表示と数値分の星をng-repeatを入れ子にして繰り返して表示したい場合はどうするか。

$scope.star = [3, 2, 4];

答えは配列の中の数値とは別に繰り返し用の配列を作成する関数を作成してng-repeatで使用する。

<li ng-repeat="len in star">
星は{{len}}個です
<span ng-repeat="n in newArray(len) track by $index">★</span>
</li>

new Arrayで配列を生成しているため内側のng-repeatには重複によるエラーが発生しないように必ずtrack by $indexを付ける

$scope.star = [3, 2, 4];

$scope.newArray = function(num) {
  return new Array(num);
};

配列の数値の表示と数値分の★を繰り返し表示するサンプル