AngularJS中ng-repeat用range filter报错[$injector:unpr]求助

问题根源 #

AngularJS的核心库没有内置range过滤器，你遇到的[$injector:unpr]错误，本质就是框架找不到这个过滤器的提供者——因为它从一开始就不存在！这也是为什么你直接用数组时功能正常，换成range就报错。

解决方案：自定义range过滤器 #

最可靠的办法是自己在你的主模块里定义这个过滤器，下面提供两种常用的实现方式：

1. 生成指定长度的序列（从0开始） #

如果你需要循环N次，比如生成0到N-1的序列，可以用这个简单的实现：

// 替换成你的主模块名称
angular.module('yourAppModule')
  .filter('range', function() {
    return function(input, total) {
      total = parseInt(total);
      input = input || [];
      for (var i = 0; i < total; i++) {
        input.push(i);
      }
      return input;
    };
  });

在模板中这样使用：

<div ng-repeat="num in [] | range:5">
  这是第 {{ num + 1 }} 次循环
</div>

2. 生成指定起止范围的序列 #

如果你需要从某个起始值到结束值的序列（比如1到10），可以修改过滤器支持起止参数：

angular.module('yourAppModule')
  .filter('range', function() {
    return function(input, start, end) {
      start = parseInt(start);
      end = parseInt(end);
      input = input || [];
      for (var i = start; i <= end; i++) {
        input.push(i);
      }
      return input;
    };
  });

模板使用示例：

<div ng-repeat="num in [] | range:3:7">
  当前值：{{ num }}
</div>

额外注意事项 #

• 确保你的过滤器是定义在已加载的主模块中，不要写错模块名称；
• 如果是使用第三方库（比如angular-filter）提供的range过滤器，记得先引入对应的JS文件，再在主模块中添加依赖：

  angular.module('yourAppModule', ['angular.filter']);
  

不过自定义过滤器更轻量，不需要额外依赖，推荐优先使用这种方式。

内容的提问来源于stack exchange，提问作者Juan I. Morales Pestana