具有数和范围的循环的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 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>

Answer 2

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

参见JSFiddle演示

HTML:

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

Answer 3

我想出了一个稍微不同的语法，它更适合我，并添加了一个可选的下限：

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>