AngularJS For循环与数字和范围

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>

当前回答

@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>

Three, two, one, zero, one, two, three

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

Minus 3, minus 2, minus 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

2014-11-29 00:55:40

其他回答

<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中实现这一点，而不需要任何控制器或工厂。

2016-06-27 11:57:25

这是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>

2016-03-09 12:24:02

假设美元范围。referncerl是一个数组

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

2020-02-12 12:12:20

嗨，你可以使用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>

2016-08-02 05:25:48