是否有一种方法可以ng-repeat定义的次数,而不是总是要迭代一个数组?

例如,下面我希望列表项显示5次,假设为$scope。数字等于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>

当前回答

下面是angular 1.2.x的答案

基本上是一样的,只是稍微修改了ng-repeat

<li ng-repeat="i in getNumber(myNumber) track by $index">

这是小提琴:http://jsfiddle.net/cHQLH/153/

这是因为angular 1.2不允许在指令中重复值。这意味着如果您尝试执行以下操作,将会得到一个错误。

<li ng-repeat="x in [1,1,1]"></li>

其他回答

有很多方法可以做到这一点。我真的很困扰在我的控制器中有逻辑,所以我创建了一个简单的指令来解决重复一个元素n次的问题。

安装:

该指令可以使用安装器install angular-repeat-n安装

例子:

<span ng-repeat-n="4">{{$index}}</span

生产:1234

它也可以使用范围变量:

<span ng-repeat-n="repeatNum"></span>

来源:

Github

我也遇到了同样的问题。我偶然发现了这条线索,但不喜欢他们在这里的方法。我的解决方案是使用我们已经安装好的underscore.js。其实很简单:

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

这正是你想要的。

这只是对公认答案的轻微变化,但实际上不需要创建新函数。仅在作用域中导入Array:

<div ng-app="myapp">
    <div ng-controller="ctrlParent">
        <ul>
            <li ng-repeat="i in counter(5) track by $index">
              <span>{{$index+1}}</span></li>
        </ul>
    </div>
</div>
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 5;
    $scope.counter = Array;
});

这把小提琴就是一个活生生的例子。

Angular提供了一个非常可爱的函数slice..使用它你可以达到你想要的效果。 例如ng-repeat="ab in abc.slice(startIndex,endIndex)"

这个演示:http://jsfiddle.net/sahilosheal/LurcV/39/将帮助你,并告诉你如何使用这个“让生活更简单”的功能。:)

html:

<div class="div" ng-app >
    <div ng-controller="Main">
        <h2>sliced list(conditional NG-repeat)</h2>
        <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>
        <h2>unsliced list( no conditional NG-repeat)</h2>
         <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>

    </div>

CSS:

ul
{
list-style: none;
}
.div{
    padding:25px;
}
li{
    background:#d4d4d4;
    color:#052349;
}

ng-JS:

 function ctrlParent ($scope) {
    $scope.abc = [
     { "name": "What we do", url: "/Home/AboutUs" },
     { "name": "Photo Gallery", url: "/home/gallery" },
     { "name": "What we work", url: "/Home/AboutUs" },
     { "name": "Photo play", url: "/home/gallery" },
     { "name": "Where", url: "/Home/AboutUs" },
     { "name": "playground", url: "/home/gallery" },
     { "name": "What we score", url: "/Home/AboutUs" },
     { "name": "awesome", url: "/home/gallery" },
     { "name": "oscar", url: "/Home/AboutUs" },
     { "name": "american hustle", url: "/home/gallery" }
    ];
}
function Main($scope){
    $scope.items = [{sort: 1, name: 'First'}, 
                    {sort: 2, name: 'Second'}, 
                    {sort: 3, name: 'Third'}, 
                    {sort: 4, name:'Last'}];
    }

更新(9/25/2018)

新版本的AngularJS(>= 1.3.0)允许你只需要一个变量就可以做到这一点(不需要函数):

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

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


原始(5/29/2013)

目前ng-repeat只接受一个集合作为参数,但是你可以这样做:

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

在你的控制器中:

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

这将允许您更改$scope。任意编号,仍然保持您正在寻找的绑定。

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

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

这里使用相同的getNumber函数对两个列表进行了修改。