Angular确实在HTML指令中提供了一些使用数字的for循环的支持:
<div data-ng-repeat="i in [1,2,3,4,5]">
do something
</div>
但是,如果作用域变量包含一个具有动态数字的范围,那么每次都需要创建一个空数组。
在控制器中
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>
我做了这个,觉得它可能对一些人有用。(是的,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)
使用方法:
HTML
<div times="customer.conversations_count">
<i class="icon-picture></i>
</div>
还能再简单一点吗?
我对过滤器很谨慎,因为Angular总是喜欢毫无理由地重新评估它们,如果你像我这样有成千上万个过滤器,这将是一个巨大的瓶颈。
这个指令甚至会监视模型中的变化,并相应地更新元素。
方法定义
下面的代码定义了一个方法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>
One, two, three, four,
有三个参数:
<span ng-repeat="i in range(-2, .7, .5)">{{ i }}, </span>
-2, -1.5, -1, -0.5, 0, 0.5,