提问



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


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

最佳参考


目前,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函数的几个列表的小提琴。[65]


EDIT 1/6/2014 :较新版本的Angular使用以下语法:


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

其它参考1


你可以这样做:


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

其它参考2


这是一个如何做到这一点的例子。请注意,我受到了ng-repeat文档中的评论的启发:http://jsfiddle.net/digitalzebra/wnWY6/[66]


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

其它参考3


我认为这个帖子中的这个jsFiddle可能就是你在寻找的东西。[67] [68]


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

其它参考4


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


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


这将完全符合您的需求。

其它参考5


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

其它参考6


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


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

其它参考7


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


整数:


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


变量:


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

其它参考8


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


安装:


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


示例:


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


产生:1234


它也可以使用范围变量:


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


来源:


Github上[69]

其它参考9


这只是接受答案的一个小变化,但你真的不需要创建一个 new 函数。只能在范围内导入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;
});


看一下这个小提琴的实例。[70]

其它参考10


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

其它参考11


angular提供了一个非常甜蜜的功能,称为切片 ..使用它你可以实现你想要的。
e.g。 ng-repeat =ab in abc.slice(startIndex,endIndex)


这个演示:http://jsfiddle.net/sahilosheal/LurcV/39/将帮助你并告诉你如何使用这个让生活更轻松的功能。 :)[71]


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'}];
    }

其它参考12


这是角度1.2.x的答案


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


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


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


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


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

其它参考13


您可以在ng-repeat中使用ng-if指令


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


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

其它参考14


对于使用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>

其它参考15


首先,使用LoDash创建角度过滤器:


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


LoDash times函数能够处理数字的null,undefined,0,数字和字符串表示。


然后,在HTML中使用它,如下所示:


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


要么


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

其它参考16


您可以使用此示例。


内控制器:


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

其它参考17


如果n不是太高,另一个选项可能是使用带有n个字符的字符串的split():


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

其它参考18


稍微扩展Ivan的第一个答案,只要字符是唯一的,你就可以使用一个字符串作为没有track by语句的集合,所以如果用例小于10个数字那么问题我会干得好:


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


这有点怪,当然,但很简单,看起来并不是特别混乱。

其它参考19


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


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

其它参考20


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


<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中滤波器的功能。

其它参考21


我遇到了同样的问题,这就是我提出的问题:


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


实例[73]


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

其它参考22


我正在创建一个可重复使用的指令,其中最大数字将来自另一个ng-repeat。所以,这是对最佳投票答案的编辑。


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


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


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

其它参考23


因为迭代一个字符串,它将为每个char呈现一个项目:


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


我们可以使用[[strong>丑陋但无代码解决方法使用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以下的数字,但在某些情况下可能会有用。

其它参考24


简单方法:


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


在组件/控制器中然后:


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


此代码来自我的typescript项目,但可以重新排列为纯javascript