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

Question

有没有办法重复定义的次数而不是总是迭代一个数组？

例如,下面我希望列表项显示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>

Answer 1

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

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

在控制器的某个地方:

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

这将允许您根据需要更改$scope.number为任何数字,并仍然保持您正在寻找的绑定.

这是一个使用相同getNumber功能的几个列表的小提琴.

编辑2014年1月6日:较新版本的Angular 1.x使用以下语法:

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

编辑9/25/2018:较新版本的Angular 1.x允许您在没有功能的情况下执行此操作.如果您的代码很简单,并且getNumber由于其他原因您不需要函数,那么您现在可以省略它并执行此操作:

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

感谢@Nikhil Nambiar从他的回答中获得此更新

Answer 2

你可以这样做:

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

Answer 3

这是一个如何做到这一点的例子.请注意,我受到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);
    };
};

Answer 4

我觉得这个的jsfiddle从这个线程可能是你在找什么.

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

Answer 5

一个更简单的方法是(例如5次):

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

Answer 6

我遇到了同样的问题.我遇到过这个帖子,但不喜欢他们在这里的方法.我的解决方案是使用我们已安装的underscore.js.这很简单:

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

这将完全符合您的要求.

Answer 7

我想保持我的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>

Answer 8

这真的是UGLY,但它可以在没有控制器的情况下使用整数或变量:

整数:

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

变量:

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

Answer 9

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

安装:

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

例:

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

生产: 1234

它也可以使用范围变量:

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

资源:

Github上

Answer 10

这只是对已接受答案的轻微变化,但您并不需要创建新功能.仅在范围内导入"数组":

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

看一下这个小提琴的实例.

Answer 11

最简单的答案: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应该在此位置出现的重复次数在哪里.

Answer 12

angular提供了一个非常甜蜜的功能,称为切片.使用此功能,您可以实现您所需要的功能. 例如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'}];
    }

Answer 13

这是角度1.2.x的答案

基本上它是相同的,稍有修改 ng-repeat

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

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

这是因为角度1.2不允许指令中的重复值.这意味着如果您尝试执行以下操作,则会出现错误.

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

Answer 14

您可以使用该ng-if指令ng-repeat

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

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