AngularJS For循环与数字&范围

小开

最佳答案

我稍微调整了一下这个答案，得到了这小提琴。

过滤器定义为:

var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);


for (var i=0; i<total; i++) {
input.push(i);
}


return input;
};
});

像这样重复使用:

<div ng-repeat="n in [] | range:100">
do something
</div>

小开

对于刚接触angularjs的人。索引可以通过使用$index.

来获取

例如:

<div ng-repeat="n in [] | range:10">
do something number \{\{$index}}
</div>

当你使用Gloopy的方便滤镜时，打印:
做一些0
做一些1
做一些事情2
做一些3
做一些4
做一些5
做一些6
做一些7
做一些8
做一些9

小开

我提出了一个稍微不同的语法，它更适合我一点，并添加了一个可选的下界:

myApp.filter('makeRange', function() {
return function(input) {
var lowBound, highBound;
switch (input.length) {
case 1:
lowBound = 0;
highBound = parseInt(input[0]) - 1;
break;
case 2:
lowBound = parseInt(input[0]);
highBound = parseInt(input[1]);
break;
default:
return input;
}
var result = [];
for (var i = lowBound; i <= highBound; i++)
result.push(i);
return result;
};
});

你可以用哪个

<div ng-repeat="n in [10] | makeRange">Do something 0..9: \{\{n}}</div>

或

<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: \{\{n}}</div>

小开

我想出了一个更简单的版本，用于创建两个定义的数字之间的范围，例如。5至15

见JSFiddle上的demo

超文本标记语言:

<ul>
<li ng-repeat="n in range(5,15)">Number \{\{n}}</li>
</ul>

控制器:

$scope.range = function(min, max, step) {
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) {
input.push(i);
}
return input;
};

小开

我做了这个，觉得它可能对一些人有用。(是的,CoffeeScript。起诉我。)

指令

app.directive 'times', ->
link: (scope, element, attrs) ->
repeater = element.html()
scope.$watch attrs.times, (value) ->
element.html ''
return unless value?
element.html Array(value + 1).join(repeater)

使用方法:

超文本标记语言

<div times="customer.conversations_count">
<i class="icon-picture></i>
</div>

还能再简单一点吗?

我对过滤器很谨慎，因为Angular总是喜欢毫无理由地重新评估它们，如果你像我这样有成千上万个过滤器，这将是一个巨大的瓶颈。

这个指令甚至会监视模型中的变化，并相应地更新元素。

小开

一种简单的方法是使用Underscore.js的_.range()方法。：）

http://underscorejs.org/#range

// declare in your controller or wrap _.range in a function that returns a dynamic range.
var range = _.range(1, 11);


// val will be each number in the array not the index.
<div ng-repeat='val in range'>
\{\{ $index }}: \{\{ val }}
</div>

小开

我使用自定义ng-repeat-range指令:

/**
* Ng-Repeat implementation working with number ranges.
*
* @author Umed Khudoiberdiev
*/
angular.module('commonsMain').directive('ngRepeatRange', ['$compile', function ($compile) {
return {
replace: true,
scope: { from: '=', to: '=', step: '=' },


link: function (scope, element, attrs) {


// returns an array with the range of numbers
// you can use _.range instead if you use underscore
function range(from, to, step) {
var array = [];
while (from + step <= to)
array[array.length] = from += step;


return array;
}


// prepare range options
var from = scope.from || 0;
var step = scope.step || 1;
var to   = scope.to || attrs.ngRepeatRange;


// get range of numbers, convert to the string and add ng-repeat
var rangeString = range(from, to + 1, step).join(',');
angular.element(element).attr('ng-repeat', 'n in [' + rangeString + ']');
angular.element(element).removeAttr('ng-repeat-range');


$compile(element)(scope);
}
};
}]);

HTML代码是

<div ng-repeat-range from="0" to="20" step="5">
Hello 4 times!
</div>

或者简单地

<div ng-repeat-range from="5" to="10">
Hello 5 times!
</div>

或者简单地说

<div ng-repeat-range to="3">
Hello 3 times!
</div>

或者只是

<div ng-repeat-range="7">
Hello 7 times!
</div>

小开

使用UnderscoreJS:

angular.module('myModule')
.run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);

将此应用于$rootScope使其在任何地方都可用:

<div ng-repeat="x in range(1,10)">
\{\{x}}
</div>

小开

你可以在angular中使用'after'或'before'过滤器。过滤器模块(https://github.com/a8m/angular-filter)

$scope.list = [1,2,3,4,5,6,7,8,9,10]

HTML:

<li ng-repeat="i in list | after:4">
\{\{ i }}
</li>

< >强结果: 5, 6, 7, 8, 9, 10

小开

在控制器中设置作用域

var range = [];
for(var i=20;i<=70;i++) {
range.push(i);
}
$scope.driverAges = range;

在“Html模板文件”中设置“重复”

<select type="text" class="form-control" name="driver_age" id="driver_age">
<option ng-repeat="age in driverAges" value="\{\{age}}">\{\{age}}</option>
</select>

小开

@Mormegil的解决方案的改进

app.filter('makeRange', function() {
return function(inp) {
var range = [+inp[1] && +inp[0] || 0, +inp[1] || +inp[0]];
var min = Math.min(range[0], range[1]);
var max = Math.max(range[0], range[1]);
var result = [];
for (var i = min; i <= max; i++) result.push(i);
if (range[0] > range[1]) result.reverse();
return result;
};
});

使用

<span ng-repeat="n in [3, -3] | makeRange" ng-bind="n"></span>

3 2 1 0 -1 -2 -3

<span ng-repeat="n in [-3, 3] | makeRange" ng-bind="n"></span>

-3 -2 -1 0 1 2 3

<span ng-repeat="n in [3] | makeRange" ng-bind="n"></span>

0 1 2 3

<span ng-repeat="n in [-3] | makeRange" ng-bind="n"></span>

0 -1 -2 -3

小开

方法定义

下面的代码定义了一个方法range()，可用于应用程序的整个范围MyApp。它的行为非常类似于Python range()方法。

angular.module('MyApp').run(['$rootScope', function($rootScope) {
$rootScope.range = function(min, max, step) {
// parameters validation for method overloading
if (max == undefined) {
max = min;
min = 0;
}
step = Math.abs(step) || 1;
if (min > max) {
step = -step;
}
// building the array
var output = [];
for (var value=min; value<max; value+=step) {
output.push(value);
}
// returning the generated array
return output;
};
}]);

使用

只有一个参数:

<span ng-repeat="i in range(3)">\{\{ i }}, </span>

0, 1, 2,

有两个参数:

<span ng-repeat="i in range(1, 5)">\{\{ i }}, </span>

1, 2, 3, 4,

有三个参数:

<span ng-repeat="i in range(-2, .7, .5)">\{\{ i }}, </span>

-2, -1.5, -1, -0.5, 0, 0.5,

小开

最短的答案:2行代码

JS(在你的AngularJS控制器中)

$scope.range = new Array(MAX_REPEATS); // MAX_REPEATS should be the most repetitions you will ever need in a single ng-repeat

超文本标记语言

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

.．.其中myCount是应该出现在这个位置的星星的数量。

你可以使用$index进行任何跟踪操作。例如，如果你想打印索引上的一些突变，你可以在div中放入以下代码:

\{\{ ($index + 1) * 0.5 }}

小开

很简单:

$scope.totalPages = new Array(10);


<div id="pagination">
<a ng-repeat="i in totalPages track by $index">
\{\{$index+1}}
</a>
</div>

小开

最简单的无代码解决方案是初始化一个数组的范围，并使用$index +无论多少我想通过偏移:

<select ng-init="(_Array = []).length = 5;">
<option ng-repeat="i in _Array track by $index">\{\{$index+5}}</option>
</select>

小开

只有简单的Javascript(你甚至不需要一个控制器):

<div ng-repeat="n in [].constructor(10) track by $index">
\{\{ $index }}
</div>

在模拟时非常有用

小开

我尝试了以下方法，对我来说效果不错:

<md-radio-button ng-repeat="position in formInput.arrayOfChoices.slice(0,6)" value="\{\{position}}">\{\{position}}</md-radio-button>

角1.3.6

小开

这是最简单的变体: 只需使用整数数组....

.

 <li ng-repeat="n in [1,2,3,4,5]">test \{\{n}}</li>

小开

迟到了。但我最后还是这样做了:

在你的控制器中:

$scope.repeater = function (range) {
var arr = [];
for (var i = 0; i < range; i++) {
arr.push(i);
}
return arr;
}

Html:

<select ng-model="myRange">
<option>3</option>
<option>5</option>
</select>


<div ng-repeat="i in repeater(myRange)"></div>

小开

这是jzm改进的答案(我不能评论，否则我会评论她/他的答案，因为她/他包含错误)。函数有一个开始/结束范围值，所以它更灵活，而且……它的工作原理。这个特殊的情况是月中的一天:

$scope.rangeCreator = function (minVal, maxVal) {
var arr = [];
for (var i = minVal; i <= maxVal; i++) {
arr.push(i);
}
return arr;
};




<div class="col-sm-1">
<select ng-model="monthDays">
<option ng-repeat="day in rangeCreator(1,31)">\{\{day}}</option>
</select>
</div>

小开

不需要在你的控制器中做任何改变，你可以这样使用:

ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index"

享受吧!

小开

<div ng-init="avatars = [{id : 0}]; flag = true ">
<div ng-repeat='data in avatars' ng-if="avatars.length < 10 || flag"
ng-init="avatars.length != 10 ? avatars.push({id : $index+1}) : ''; flag = avatars.length <= 10 ? true : false">
<img ng-src="http://actual-names.com/wp-content/uploads/2016/01/sanskrit-baby-girl-names-400x275.jpg">
</div>
</div>

如果你想在html中实现这一点，而不需要任何控制器或工厂。

小开

嗨，你可以使用AngularJS实现纯html(不需要指令!)

<div ng-app="myapp" ng-controller="YourCtrl" ng-init="x=[5];">
<div ng-if="i>0" ng-repeat="i in x">
<!-- this content will repeat for 5 times. -->
<table class="table table-striped">
<tr ng-repeat="person in people">
<td>\{\{ person.first + ' ' + person.last }}</td>
</tr>
</table>
<p ng-init="x.push(i-1)"></p>
</div>
</div>

小开

假设$scope.refernceurl是一个数组

for(var i=0; i<$scope.refernceurl.length; i++){
$scope.urls+=$scope.refernceurl[i].link+",";
}