具有数和范围的循环的AngularJS

Question

具有数和范围的循环的AngularJS

在其HTML指令中使用数字为for循环提供了一些支持：

<div data-ng-repeat="i in [1,2,3,4,5]">
  do something</div>

但是，如果Scope变量包含一个具有动态数字的范围，那么每次都需要创建一个空数组。

在控制器中

var range = [];for(var i=0;i<total;i++) {
  range.push(i);}$scope.range = range;

在HTML中

<div data-ng-repeat="i in range">
  do something</div>

这是可行的，但这是不必要的，因为我们将不会在循环中使用范围数组。有没有人知道设置最小/最大值的范围或规则？

类似于：

<div data-ng-repeat="i in 1 .. 100">
  do something</div>

Answer 1

我调整了这个答案有点想出来这把小提琴.过滤器定义为：var&nbsp;myApp&nbsp;=&nbsp;angular.module('myApp',&nbsp;[]);myApp.filter('range',&nbsp;function()&nbsp;{ &nbsp;&nbsp;return&nbsp;function(input,&nbsp;total)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;total&nbsp;=&nbsp;parseInt(total); &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i=0;&nbsp;i<total;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input.push(i); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;input; &nbsp;&nbsp;};});重复使用如下：<div&nbsp;ng-repeat="n&nbsp;in&nbsp;[]&nbsp;|&nbsp;range:100"> &nbsp;&nbsp;do&nbsp;something</div>

Answer 2

我想出了一个更简单的版本，用于在两个定义的数字之间创建一个范围，例如。5至15参见JSFiddle演示HTML:<ul> &nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;ng-repeat="n&nbsp;in&nbsp;range(5,15)">Number&nbsp;{{n}}</li></ul>控制器:$scope.range&nbsp;=&nbsp;function(min,&nbsp;max,&nbsp;step)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;step&nbsp;=&nbsp;step&nbsp;||&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;input&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;min;&nbsp;i&nbsp;<=&nbsp;max;&nbsp;i&nbsp;+=&nbsp;step)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input.push(i); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;input;};

Answer 3

我想出了一个稍微不同的语法，它更适合我，并添加了一个可选的下限：myApp.filter('makeRange',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;function(input)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;lowBound,&nbsp;highBound; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch&nbsp;(input.length)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;1: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lowBound&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;highBound&nbsp;=&nbsp;parseInt(input[0])&nbsp;-&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;2: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lowBound&nbsp;=&nbsp;parseInt(input[0]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;highBound&nbsp;=&nbsp;parseInt(input[1]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;input; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;lowBound;&nbsp;i&nbsp;<=&nbsp;highBound;&nbsp;i++) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result.push(i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;});你可以用它作为<div&nbsp;ng-repeat="n&nbsp;in&nbsp;[10]&nbsp;|&nbsp;makeRange">Do&nbsp;something&nbsp;0..9:&nbsp;{{n}}</div>或<div&nbsp;ng-repeat="n&nbsp;in&nbsp;[20,&nbsp;29]&nbsp;|&nbsp;makeRange">Do&nbsp;something&nbsp;20..29:&nbsp;{{n}}</div>