AngularJS中如何阻止ng-repeat自动排序？

这个问题我之前也碰到过，AngularJS的ng-repeat确实有个容易踩坑的特性：当它遍历的是键值对对象时，会默认按键的字母/数字顺序自动排序；但如果遍历的是真正的数组，就会严格保持原有顺序。你遇到的情况大概率是绑定的data其实是对象，而非你以为的JSON数组。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：把对象转成真正的数组（最推荐） #

如果你的数据源是对象格式（比如像{"0": {...}, "1": {...}}这种），直接改成数组就能彻底解决问题。

举个例子，原来的控制器代码可能是这样的：

app.controller('Controller', function($scope) {
  $scope.data = {
    "2": { Project: "ABC", Show: false },
    "0": { Project: "DEF", Show: true },
    "1": { Project: "ABC", Show: false }
  };
});

把它改成数组形式：

app.controller('Controller', function($scope) {
  $scope.data = [
    { Project: "DEF", Show: true },
    { Project: "ABC", Show: false },
    { Project: "ABC", Show: false }
  ];
});

之后模板里的ng-repeat="x in data"就会严格按照数组的顺序渲染，再也不会自动排序了。

方案2：用Object.values()配合track by $index（适合无法改数据源的情况） #

如果没办法直接修改数据源的结构，可以在模板里把对象转换成数组，同时用track by $index锁定顺序：

首先在控制器里把Object暴露到$scope，让模板能访问：

app.controller('Controller', function($scope) {
  $scope.Object = Object; // 暴露Object对象
  // 你的原有data对象
  $scope.data = { /* ... */ };
});

然后修改模板的ng-repeat：

<div ng-repeat="x in Object.values(data) track by $index">
  <input type="checkbox" ng-show="x.Project == 'ABC'" ng-model="x.Show">
  <b ng-show="x.Project == 'ABC'"> project ABC is wonderful</b>
  <!-- 你的其他内容 -->
</div>

Object.values()会把对象的所有值提取成数组，配合track by $index可以保证渲染顺序和提取顺序一致（ES6及以上环境会保留对象键的插入顺序）。

方案3：自定义过滤器控制顺序（灵活度最高） #

如果需要更灵活的控制，可以写一个自定义过滤器，把对象转成有序的键值对数组：

先在模块里定义过滤器：

app.filter('keepOriginalOrder', function() {
  return function(obj) {
    if (typeof obj !== 'object' || Array.isArray(obj)) return obj;
    // 提取键和值，保留原有插入顺序
    return Object.keys(obj).map(function(key) {
      return { key: key, value: obj[key] };
    });
  };
});

然后在模板里使用：

<div ng-repeat="item in data | keepOriginalOrder track by item.key">
  <input type="checkbox" ng-show="item.value.Project == 'ABC'" ng-model="item.value.Show">
  <b ng-show="item.value.Project == 'ABC'"> project ABC is wonderful</b>
  <!-- 其他内容 -->
</div>

先确认你的数据源类型 #

可以先在控制器里加两行日志，确认data到底是对象还是数组：

console.log(typeof $scope.data); // 打印"object"是对象，"array"是数组
console.log(Array.isArray($scope.data)); // true是数组，false是对象

这样能帮你快速定位问题根源。

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