如何在AngularJS中限制ng-repeat遍历的对象数组数量？

嘿，我来帮你搞定这个问题～其实AngularJS的limitTo过滤器是完全支持对象数组的，你遇到的问题大概率是数据源的类型或者细节上的小问题，咱们一步步排查：

首先确认核心前提：你的数据源必须是数组 #

limitTo只对数组生效，如果你的aliasFilterTypes是一个普通的键值对对象（比如{type1: {...}, type2: {...}}），那过滤器肯定不起作用。你可以先在控制器里打印验证：

console.log(Array.isArray($scope.aliasFilterTypes)); // 应该返回true才对

如果已经是对象数组，检查这些细节 #

如果确认是数组，那你的代码写法其实是对的，但可以排查这几点：

• 检查拼写：limitTo是大小写敏感的，别写成小写的limitto
• 确认数组长度：如果aliasFilterTypes本身只有2个元素，那自然只会显示2个，先看看数组里到底有多少个对象
• 可以临时去掉translate过滤器，直接显示{{type.name}}，排除翻译过滤器干扰的可能

如果数据源是普通对象，转成数组再处理 #

要是aliasFilterTypes是普通对象，你需要先把它转成数组，有几种方式：

方式1：在模板里直接转换（需要把Object暴露到$scope）

先在控制器里把Object挂载到$scope：

// 你的控制器代码里
$scope.Object = Object;

然后模板里用Object.values()转成数组：

<md-select required name="filterType" ng-model="filter.type" aria-label="{{ 'alias.filter-type' | translate }}">
  <md-option ng-value="type.value" ng-repeat="type in Object.values(aliasFilterTypes) | limitTo:3" >
    {{type.name | translate}}
  </md-option>
</md-select>

方式2：自定义过滤器转换对象为数组

这种方式更优雅，也不用污染$scope：

// 定义过滤器
angular.module('yourAppName').filter('objectToArray', function() {
  return function(obj) {
    // 如果obj是null/undefined，返回空数组避免报错
    return obj ? Object.values(obj) : [];
  };
});

然后模板里链式调用过滤器：

<md-select required name="filterType" ng-model="filter.type" aria-label="{{ 'alias.filter-type' | translate }}">
  <md-option ng-value="type.value" ng-repeat="type in aliasFilterTypes | objectToArray | limitTo:3" >
    {{type.name | translate}}
  </md-option>
</md-select>

方式3：在控制器提前处理数据

直接在控制器里把对象转成数组，模板就更简洁了：

// 控制器里处理
$scope.filterTypes = Object.values($scope.aliasFilterTypes);

模板里直接用处理后的数组：

<md-select required name="filterType" ng-model="filter.type" aria-label="{{ 'alias.filter-type' | translate }}">
  <md-option ng-value="type.value" ng-repeat="type in filterTypes | limitTo:3" >
    {{type.name | translate}}
  </md-option>
</md-select>

按照上面的步骤排查，应该就能解决只显示前3个对象的需求啦～

内容的提问来源于stack exchange，提问作者user7888596