angularjs 1.5 : How to enable auto-sort on key value object?

Question

我最近将我的应用程序从 angularjs v1.2 升级到了 v1.5。在 v1.2 上，angularjs 在下拉列表中自动排序基于键/值的对象。但是现在，当我升级到 1.5 时，我的网络应用程序上的每个淹没都以随机顺序显示项目(即来自数据库的顺序)。我可以在 1.5 中启用任何全局参数来再次获得自动排序功能吗？

app.controller('MainCtrl', function($scope) {
  $scope.days = {
    'key1': 'val1',
    'key7': 'val7',
    'key3': 'val3',
    'key9': 'val9',
    'key2': 'val2',
    'key5': 'val5',
    'key4': 'val4',
  };
});

我为两个版本创建了 plunk 以清楚地阐述问题，

版本 1.2 https://plnkr.co/edit/o0KJXjW25nlvDoKliHV0?p=preview

版本 1.5 https://plnkr.co/edit/TudDwMhaAREhGVl5vz2c?p=preview

Answer 1

Always have a look at the migration guide before migrating to new version.

在 v1.2 上，angularjs 在下拉列表中自动排序基于键/值的对象。但是现在，当我升级到 1.5 时，我的网络应用程序上的每个 drown 都以随机顺序显示项目。

From MDN article

The for...in statement iterates over the enumerable properties of an object, in arbitrary order.

在AngularJS 1.5.0 , ng-options 指令使用 getOptionValuesKeys() 方法获取键数组。在那个方法中，他们使用了不能保证迭代顺序的for...in。这就是下拉列表中的值未排序的原因。

function getOptionValuesKeys(optionValues) {
      var optionValuesKeys;

      if (!keyName && isArrayLike(optionValues)) {
        optionValuesKeys = optionValues;
      } else {
        // if object, extract keys, in enumeration order, unsorted
        optionValuesKeys = [];
        for (var itemKey in optionValues) {
          if (optionValues.hasOwnProperty(itemKey) && itemKey.charAt(0) !== '$') {
            optionValuesKeys.push(itemKey);
          }
        }
      }
  return optionValuesKeys;   
}

在AngularJS 1.2.28 , ng-options 指令使用 sortedKeys() 方法获取键数组。他们还在该方法中使用了 for...in，但在返回之前对数组进行了排序。

function sortedKeys(obj) {
  var keys = [];
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      keys.push(key);
    }
  }
  return keys.sort();
}

我可以在 1.5 中启用任何全局参数来再次获得自动排序功能吗？

是的，但也许你不应该改变。为此，您必须对 AngularJS 源代码中 getOptionValuesKeys 方法的返回值进行排序。修改后的方法应该是这样的:

function getOptionValuesKeys(optionValues) {
       var optionValuesKeys;

       if (!keyName && isArrayLike(optionValues)) {
            optionValuesKeys = optionValues;
       } else {
            // if object, extract keys, in enumeration order, unsorted
            optionValuesKeys = [];
            for (var itemKey in optionValues) {
                if (optionValues.hasOwnProperty(itemKey) && itemKey.charAt(0) !== '$') {
                  optionValuesKeys.push(itemKey);
                }
            }
       }
  return optionValuesKeys.sort();
 }

可能会出现其他问题:Angular 团队为何进行此更改？

Migrating from 1.3 to 1.4 : 查看 ngOptions

中的更改

Due to 7fda214c, when iterating over an object's properties using the (key, value) in obj syntax the order of the elements used to be sorted alphabetically. This was an artificial attempt to create a deterministic ordering since browsers don't guarantee the order. But in practice this is not what people want and so this change iterates over properties in the order they are returned by Object.keys(obj), which is almost always the order in which the properties were defined.

注意:

此更改是在 AngularJS 1.4.0 中进行的，而不是在 1.5.0 中进行的。当您从 1.2.28 迁移时，您应该考虑从版本 1.3.0 到 1.5.0 的所有更改。