AngularJS For Loop with Numbers&Ranges

Question

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>

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

除了简单的Javascript(你甚至不需要控制器):

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

在模拟时非常有用

Answer 4

我想出了一个略微不同的语法,它更适合我,并添加了一个可选的下限:

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>

Answer 5

对于那些刚接触到angularjs的人.可以使用$ index获取索引.

例如:

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

当你使用Gloopy的便捷过滤器打印时,打印:
做0号
做第1号
做第2
事做第3
事做第3 事做第4
事做第5
事做第6
事做第7
事做第8事
做9号事

Answer 6

这样做的一个简单方法是使用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>

Answer 7

我使用自定义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>

Answer 8

最简单的没有代码解决方案是使用范围初始化一个数组,并使用$ index +但是我希望通过以下方式来补偿:

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

Answer 9

方法定义

下面的代码定义了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,

Answer 10

你可以在angular.filter模块中使用'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

Answer 11

无需对控制器进行任何更改，您可以使用以下命令：

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

请享用！