如何在 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 .nu​​mber 设置为 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中文网其他相关文章！