angularjs - 如何在 AngularJS 中重复元素？

Question

我知道我可以ng-repeat用来迭代集合。我如何迭代一个范围。例如，类似：

<div class='aoeu' ng-repeat='count in range(1,5)'>
  <div id='{{count}}'></div>
</div>

Answer 1

Javascript 中没有 range() 函数，但您可以创建一个返回适合您需要的值数组的函数，或者使用 JS 库来实现该效果。我会使用underscore.js，非常简单：

<div class='aoeu' ng-repeat='count in _.range(1,5)'>
  <div id='{{count}}'></div>
</div>

当然，为了让您能够在 Angular 应用程序（指令等）中使用下划线，您需要将其包含在您的作用域中。在您的项目中包含 underscore.js，并在您的主控制器中执行$rootScope._ = _

这样，角度中的任何控制器或指令都可以识别 $scope._ （引用下划线库），并且上面的代码片段将起作用！（如果您只需要创建任意范围，您可以自己创建范围函数 - 并且“制作”我的意思是复制数百万个可用示例中的任何一个。这是一个）

Answer 2

下划线似乎是最有表现力的，但你可能想看看这个答案：AngularJS ng-options create range

它使用过滤器来创建一个数组。这是我的版本

var App = angular.module('app', []);
App.filter('range', function() {
  return function(arr, lower, upper) {
    for (var i = lower; i <= upper; i++){
      arr.push(i);
    }
    return arr;
  };
});​

您会使用如下：

<li ng-repeat="n in [] | range:5:10"> {{n}} </li>

和 JSFiddle http://jsfiddle.net/jaimem/hKvNc/4/

pd：如果您更喜欢parseInt将字符串转换为整数，请不要忘记传递radix. 在解析min和max.