如何在 AngularJS 中重複元素特定次數？

使用 AngularJS 將元素重複特定次數

使用 AngularJS 時，ng-repeat 指令通常用於迭代數組並動態顯示資料。但是，如果無論任何陣列如何，您都需要重複元素特定次數怎麼辦？

原始解決方案（AngularJS 1.3.0 之前）

版本在1.3.0 之前的AngularJS 中，需要一個解決方法：

1. 在控制器中建立一個名為getNumber() 的函數：

<code class="js">$scope.getNumber = function(num) {
    return new Array(num);   
}</code>

2. 在HTML，使用ng-repeat 中的getNumber() 函數來定義重複次數：

<code class="html"><li ng-repeat="i in getNumber(number) track by $index">
    <span>{{ $index+1 }}</span>
</li></code>

更新的解決方案（AngularJS 1.3.0 及更高版本）

從AngularJS 1.3.0 開始，不再需要getNumber()函數：

<code class="html"><li ng-repeat="x in [].constructor(number) track by $index">
    <span>{{ $index+1 }}</span>
</li></code>

範例輸出

假設$scope .number 設定為5，將呈現所需的輸出：

<code class="html"><ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
</ul></code>

此技術可讓您動態重複元素特定次數，為AngularJS 範本建立提供更大的靈活性。

以上是如何在 AngularJS 中重複元素特定次數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！