javascript - ng-repeat 定义的次数而不是在数组上重复的方法?

标签 javascript html angularjs angularjs-ng-repeat

有没有办法ng-repeat指定的次数,而不必总是迭代数组?

例如,下面我希望列表项显示 5 次,假设 $scope.number 等于 5,另外增加数字,以便每个列表项增加 1、2、3、4 , 5

期望的结果:

<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>

最佳答案

更新(2018 年 9 月 25 日)

较新版本的 AngularJS (>= 1.3.0) 允许您仅使用变量来执行此操作(不需要函数):

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

这在第一次提出问题时是不可能的。感谢@Nikhil Nambiar 在下面对本次更新的回答

<小时/>

原始(2013 年 5 月 29 日)

目前,ng-repeat 仅接受集合作为参数,但您可以这样做:

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

在你的 Controller 中的某个地方:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

这将允许您将 $scope.number 更改为您喜欢的任何数字,并且仍然保持您正在寻找的绑定(bind)。

编辑 (1/6/2014) -- 较新版本的 AngularJS (>= 1.1.5) 需要通过 $index 跟踪:

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

Here is a fiddle多个列表使用相同的 getNumber 函数。

关于javascript - ng-repeat 定义的次数而不是在数组上重复的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16824853/

相关文章:

javascript - AngularSlideables 反向效果

javascript - 浏览器在每个页面上添加相同的 Facebook 用户头像图像

javascript - jquery 添加带有动态 url 的背景图片

html - <figcaption> 不显示

javascript - 如何制作多种颜色的指示器

php - 使用 FFmpeg 的语法不正确

javascript - 当数据达到 10 行时,如何将数据放在新列中?

javascript - 多次点击div不会刷新: Only refreshes once

javascript - 如何将 POST http 方法与 Service Worker 一起使用?

javascript - AngularJS,合并 2 个资源的服务