ng-repeat定義次數而不是重複數組？

本文翻譯自：Way to ng-repeat defined number of times instead of repeating over array?

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array? 有沒有辦法重複定義的次數而不是總是迭代一個數組？

For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 in addition incrementing the number so each list item increments like 1, 2, 3, 4, 5 例如，下面我希望列表項顯示5次，假設$scope.number等於5另外增加數字，所以每個列表項增量如1,2,3,4,5

Desired result: 期望的結果：

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

---

#1樓

參考：https://stackoom.com/question/18aub/ng-repeat定義次數而不是重複數組

---

#2樓

At the moment, ng-repeat only accepts a collection as a parameter, but you could do this: 目前， ng-repeat只接受一個集合作爲參數，但你可以這樣做：

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

And somewhere in your controller: 在控制器的某個地方：

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

This would allow you to change $scope.number to any number as you please and still maintain the binding you're looking for. 這將允許您根據需要將$scope.number更改$scope.number任意數字，並仍然保持您正在尋找的綁定。

Here is a fiddle with a couple of lists using the same getNumber function. 這是一個使用相同getNumber函數的幾個列表的小提琴 。

EDIT 1/6/2014 : Newer versions of Angular 1.x make use of the following syntax: 編輯2014年1月6日 ：較新版本的Angular 1.x使用以下語法：

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

EDIT 9/25/2018 : Newer versions of Angular 1.x allow you to do this without a function. 編輯9/25/2018 ：較新版本的Angular 1.x允許您在沒有功能的情況下執行此操作。 If your code is simple and you don't need a getNumber function for other reasons, you can now omit that and just do this: 如果您的代碼很簡單，並且由於其他原因您不需要getNumber函數，那麼您現在可以省略它並執行此操作：

<div ng-repeat="x in [].constructor(number) track by $index">

Credit to @Nikhil Nambiar from his answer below for this update 感謝@Nikhil Nambiar從他的回答中獲得此更新

---

#3樓

I think this jsFiddle from this thread might be what you're looking for. 我覺得這個的jsfiddle從這個線程可能是你在找什麼。

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>

---

#4樓

Here is an example of how you could do this. 這是一個如何做到這一點的例子。 Note that I was inspired by a comment in the ng-repeat docs: http://jsfiddle.net/digitalzebra/wnWY6/ 請注意，我受到ng-repeat文檔中的評論的啓發： http ： //jsfiddle.net/digitalzebra/wnWY6/

Note the ng-repeat directive: 注意ng-repeat指令：

<div ng-app>
    <div ng-controller="TestCtrl">
        <div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
    </div>
</div>

Here is the controller: 這是控制器：

function TestCtrl($scope) {
    $scope.range = function(n) {
        return new Array(n);
    };
};

---

#5樓

I needed a more dynamic solution to this - where I could increment the repeat. 我需要一個更動態的解決方案 - 我可以增加重複。

HTML HTML

<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>

Duplicator Control 複製器控制

<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>

JS JS

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
    primaryValue++;
    $scope.newUserCount.push(primaryValue)
}

---

#6樓

You can use this example. 您可以使用此示例。

Inside controller: 內控制器：

$scope.data = {
    'myVal': 33,
    'maxVal': 55,
    'indexCount': function(count) {
        var cnt = 10;
        if (typeof count === 'number') {
            cnt = count;
        }
        return new Array(cnt);
    }
};

Example for select element at the HTML code side: HTML代碼側的select元素示例：

<select ng-model="data.myVal" value="{{ data.myVal }}">
    <option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option>
</select>