ng-repeat定义的次数而不是重复数组的方法？

你可以这样做：

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>

这是一个如何做到这一点的例子。请注意，我的灵感来自 ng-repeat 文档中的评论：http://jsfiddle.net/digitalzebra/wnWY6/

注意 ng-repeat 指令：

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

这是控制器：

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

我认为此 thread 中的此 jsFiddle 可能就是您要查找的内容。

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

一种更简单的方法是（例如 5 次）：

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

我遇到了同样的问题。我遇到了这个线程，但不喜欢他们在这里的方法。我的解决方案是使用我们已经安装的 underscore.js。就这么简单：

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

这将完全符合您的要求。

我想保持我的 html 非常小，所以定义了一个小过滤器来创建数组 [0,1,2,...]，就像其他人所做的那样：

angular.module('awesomeApp')
  .filter('range', function(){
    return function(n) {
      var res = [];
      for (var i = 0; i < n; i++) {
        res.push(i);
      }
      return res;
    };
  });

之后，在视图上可以这样使用：

<ul>
  <li ng-repeat="i in 5 | range">
    {{i+1}} <!-- the array will range from 0 to 4 -->
  </li>
</ul>

这真的很丑陋，但它可以在没有控制器的情况下用于整数或变量：

整数：

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>

多变的：

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>

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

安装：

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

例子：

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

产生：1234

它也可以使用范围变量：

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

资源：

Github

这只是对已接受答案的微小变化，但您实际上并不需要创建新函数。仅在范围内导入“数组”：

<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;
});

请参阅 this fiddle 以获取实时示例。

最简单的答案：2行代码

JS（在你的 AngularJS 控制器中）

$scope.range = new Array(MAX_REPEATS); // set MAX_REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy

HTML

<div ng-repeat="i in range.slice(0,repeatCount) track by $index"></div>

...其中 repeatCount 是应出现在此位置的重复次数。

angular 提供了一个非常甜美的功能，称为 slice.. 使用它您可以实现您正在寻找的东西。例如 ng-repeat="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'}];
    }

这是角度 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>

您可以将 ng-if 指令与 ng-repeat 一起使用

因此，如果 num 是您需要重复元素的次数：

<li ng-repeat="item in list" ng-if="$index < num">

对于使用 CoffeeScript 的用户，您可以使用范围推导：

指示

link: (scope, element, attrs) ->
  scope.range = [1..+attrs.range]

或控制器

$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer

模板

<div ng-repeat="i in range">[ the rest of your code ]</div>

稍微扩展一下 Ivan 的第一个答案，只要字符是唯一的，您就可以使用字符串作为不使用 track by 语句的集合，所以如果用例少于 10 个数字（因为它在问题中）我会只需这样做：

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

当然，这有点笨拙，但看起来很简单，而且不会特别令人困惑。

你可以使用这个例子。

内部控制器：

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

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>

首先，使用 LoDash 创建一个角度过滤器：

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

LoDash 时间函数能够处理 null、未定义、0、数字和数字的字符串表示形式。

然后，在您的 HTML 中使用它，如下所示：

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

或者

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>

和 2021 版本

*ngFor="let x of [].constructor(number)"

Angular 提供过滤器来修改集合。在这种情况下，集合将为空，即 []，并且过滤器也接受参数，如下所示：

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

JS：

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

这种方法与上面提出的方法非常相似，不一定优越，但显示了 AngularJS 中过滤器的强大功能。

如果 n 不是太高，另一种选择是使用 split('') 和 n 个字符的字符串：

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>

我遇到了同样的问题，这就是我得出的结论：

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

...和html：

<div repeat-times="4">{{ $index }}</div>

LIVE EXAMPLE

我使用了下划线的 times 函数，因为我们已经在项目中使用了它，但是您可以轻松地将其替换为本机代码。

我需要一个更动态的解决方案——我可以增加重复。

HTML

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

复印机控制

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

JS

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

我正在创建一个可重用的指令，其中最大数量将来自另一个 ng-repeat。因此，这是对最佳投票答案的编辑。

只需将控制器上的代码更改为 -

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.push(j)
    }
    return temp; 
}

这将返回一个具有指定迭代次数的新数组

因为迭代一个字符串，它将为每个字符呈现一个项目：

<li ng-repeat = "k in 'aaaa' track by $index">
   {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
</li>

我们可以使用这个 ugly 但使用 number|n decimal places 原生过滤器的无代码解决方法。

 <li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
    {{$index}}
 </li>

这样，我们将拥有没有额外代码的 mynumber 元素。说 '0.000'。
我们使用 mynumber - 2 来补偿 0.
它不适用于 3 以下的数字，但在某些情况下可能有用。

$scope.number = 5;

<div ng-repeat="n in [] | range:$scope.number">
      <span>{{$index}}</span>
</div>

简单的方法：

    public defaultCompetences: Array<number> = [1, 2, 3];

在组件/控制器中，然后：

    <div ng-repeat="i in $ctrl.defaultCompetences track by $index">

此代码来自我的打字稿项目，但可以重新排列为纯 javascript