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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16824853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:54:37  来源:igfitidea点击:

Way to ng-repeat defined number of times instead of repeating over array?

javascripthtmlangularjsangularjs-ng-repeat

提问by Malcr001

Is there a way to ng-repeata defined number of times instead of always having to iterate over an array?

有没有办法达到ng-repeat定义的次数,而不必总是遍历数组?

For example, below I want the list item to show up 5 times assuming $scope.numberequal 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>

回答by Dan

Update (9/25/2018)

更新 (9/25/2018)

Newer versions of AngularJS (>= 1.3.0) allow you to do this with only a variable (no function needed):

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

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

This was not possible at the time the question was first asked. Credit to @Nikhil Nambiar from his answer below for this update

这在首次提出问题时是不可能的。感谢@Nikhil Nambiar 对此更新的回答



Original (5/29/2013)

原版 (5/29/2013)

At the moment, ng-repeatonly accepts a collection as a parameter, but you could do this:

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

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

And somewhere in your controller:

在您的控制器中的某处:

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

This would allow you to change $scope.numberto any number as you please and still maintain the binding you're looking for.

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

EDIT (1/6/2014)-- Newer versions of AngularJS (>= 1.1.5) require track by $index:

编辑(2014 年 1 月 6 日)——较新版本的 AngularJS(>= 1.1.5)需要track by $index

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

Here is a fiddlewith a couple of lists using the same getNumberfunction.

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

回答by akonsu

you can do this:

你可以这样做:

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

回答by Polaris878

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

回答by jeffmayeur

I think this jsFiddlefrom this threadmight 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>

回答by Nikhil Nambiar

A simpler approach would be (for an example of 5 times):

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

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

回答by Mark Roach

I ran into the same issue. I came across this thread, but didn't like the methods they had here. My solution was using underscore.js, which we had already installed. It's as simple as this:

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

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

This will do exactly what you're looking for.

这将完全符合您的要求。

回答by miguelr

I wanted to keep my html very minimal, so defined a small filter that creates the array [0,1,2,...] as others have done:

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

After that, on the view is possible to use like this:

之后,在视图上可以像这样使用:

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

回答by M J

This is really UGLY, but it works without a controller for either an integer or variable:

这真的很丑,但它可以在没有整数或变量的控制器的情况下工作:

integer:

整数:

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

variable:

多变的:

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

回答by connorbode

There are many ways to do this. I was really bothered at having the logic in my controller so I created a simple directive to solve the problem of repeating an element n-times.

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

Installation:

安装:

The directive can be installed using bower install angular-repeat-n

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

Example:

例子:

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

produces: 1234

产生: 1234

It also works using a scope variable:

它也可以使用范围变量:

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

Source:

来源:

Github

GitHub

回答by Sylvain Leroux

This is only a slight variation on the accepted answer, but you don't really need to create a newfunction. Only to import 'Array' in the scope:

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

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

See this fiddlefor a live example.

看到这个小提琴的一个活生生的例子。