AngularJS For Loop 数字和范围


AngularJS For Loop with Numbers & Ranges

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

1
  do something

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

在控制器中

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

在HTML中

1
  do something

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

类似：

1
  do something
相关讨论

我稍微修改了一下这个答案，想出了这个小提琴。

过滤器定义为：

1
2
3
4
5
6
7
8
9
10
11
12
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;
  };
});

重复使用如下：

1
  do something
相关讨论

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

参见jfiddle上的演示

HTML：

1
2
3
4
5
6
7
<ul>

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


</ul>

控制器：

1
2
3
4
5
6
7
8
$scope.range = function(min, max, step) {
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step) {
        input.push(i);
    }
    return input;
};
相关讨论

除了简单的javascript(您甚至不需要控制器)：

1
    {{ $index }}

模拟时非常有用

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
        };
    });

可以用作

1
Do something 0..9: {{n}}

或

1
Do something 20..29: {{n}}
相关讨论

对于那些刚接触安古拉的人。使用$index可以获得索引。

例如：

1
    do something number {{$index}}

当您使用Gloopy的便捷过滤器时，打印：
做一些数字0
做一些数字1
做第二件事做第三件事做一些4号的事情做一些5号的事情做6号的事做一些7号的事情做一些8号的事情做9号事情

相关讨论

实现这一点的一个简单方法是使用underline.js的.range()方法。：)

http://underlinejs.org/范围

1
2
3
4
5
6
// 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.

    {{ $index }}: {{ val }}
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * 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代码是

1
    Hello 4 times!

或者简单地

1
    Hello 5 times!

甚至简单

1
    Hello 3 times!

或者只是

1
    Hello 7 times!
相关讨论

最简单的无代码解决方案是初始化一个带有范围的数组，然后使用$index+，不管我想用什么来补偿：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
    };
}]);

用法

有一个参数：

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

0, 1, 2,

有两个参数：

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

1, 2, 3, 4,

有三个参数：

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

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

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

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

HTML：

1
2
3
4
<li ng-repeat="i in list | after:4">
  {{ i }}

</li>

结果：5、6、7、8、9、10

在控制器没有任何变化的情况下，您可以使用：

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

享受！

相关讨论

最短答案：2行代码

JS(在AngularJS控制器中)

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

HTML

1
 

…其中myCount是应该出现在这个位置的恒星数。

您可以使用$index进行任何跟踪操作。例如，如果要在索引上打印一些突变，可以在div中输入以下内容：

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

嗨，您可以使用纯HTML使用AngularJS来实现这一点(不需要任何指令！)

1
2
3
4
5
6
7
8
9
  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>

非常简单的一个：

1
2
3
4
5
$scope.totalPages = new Array(10);

 
   
      {{$index+1}}

使用下划线：

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

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

1
    {{x}}

在控制器中设置范围

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

在HTML模板文件中设置重复

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

我尝试了以下方法，但效果很好：

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

角度1.3.6

参加聚会迟到了。但我最终还是这样做了：

在控制器中：

1
2
3
4
5
6
7
$scope.repeater = function (range) {
    var arr = [];
    for (var i = 0; i < range; i++) {
        arr.push(i);
    }
    return arr;
}

Html：

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

这是JZM改进的答案(我不能评论，否则我会评论她/他的答案，因为他/她包含错误)。函数有一个开始/结束范围值，所以它更灵活，而且…它起作用了。本案例适用于每月的某一天：

1
2
3
4
5
6
7
8
9
10
11
12
13
$scope.rangeCreator = function (minVal, maxVal) {
    var arr = [];
   for (var i = minVal; i <= maxVal; i++) {
      arr.push(i);
   }
   return arr;
};



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

对@mormegil解决方案的改进

1
2
3
4
5
6
7
8
9
10
11
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;
  };
});

使用

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

3 2 1 0-1-2-3

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

-3-2-1 0 1 2 3

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

0 1 2 2

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

0—1—2—3

我突然想起这个，发现它可能对某些人有用。(是的，咖啡描述。告我。

指令

1
2
3
4
5
6
7
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

1
  <i class="icon-picture>

这能简单点吗？

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

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

相关讨论

1
2
3
  <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">

如果您想在没有任何控制器或工厂的HTML中实现这一点。

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

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

相关讨论