在 Angular JS 中跳过 ng-repeat JSON 排序

Question

有人知道我在使用 ng-repeat 时如何完全跳过 JSON 排序（可能以一种轻松的方式）？

例如，我的源 JSON 看起来像这样 -

{
   "title": "Title",
   "description": "Description",
   "moreInfo": "Moreinformation"
}

一旦我在 ng-repeat 中使用它，它就会按字母顺序排列它们。像这样 -

{
   "description": "Description",
   "moreInfo": "Moreinformation",
   "title": "Title"
}

我的 ng-repeat 看起来像这样 -

<div ng-repeat="(key,data) in items">
   <span class="one"> {{key}} </span>
   <span class="two"> {{data}} </span>
</div>

我看到人们拥有一个单独的键数组并使用它们来识别 JSON 对象，最终避免了字母排序。

有没有优雅的方法来做到这一点？

Answer 1

在 google 群组中找到了很好的解决方法：

    <div ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
         <pre>
               key: {{key}}
               value: {{value}}
         </pre>           
    </div>

在范围内：

    $scope.data = {
        'key4': 'data4',
        'key1': 'data1',
        'key3': 'data3',
        'key2': 'data2',
        'key5': 'data5'
    };

    $scope.notSorted = function(obj){
        if (!obj) {
            return [];
        }
        return Object.keys(obj);
    }

工作：http://jsfiddle.net/DnEXC/

原文：https://groups.google.com/forum/#!topic/angular/N87uqMfwcTs

Answer 2

这个使用过滤器的答案最适合我。

https://groups.google.com/d/msg/angular/N87uqMfwcTs/EGoY6O2gtzsJ

http://jsfiddle.net/er52h/1/

angular.module('myFilters', [])
  .filter('keys', function() {
    return function(input) {
      if (!input) {
        return [];
      }
      return Object.keys(input);
    }
  });

你可以这样使用：

<div ng-repeat="key in data | keys" ng-init="value = data[key]"></div>

Answer 3

我正在使用这种方法来覆盖字母顺序：

控制器：

$scope.steps = {
    "basic-settings": "Basic Settings",
    "editor": "Editor",
    "preview-and-publish": "Preview & Publish"
};

// NOTE I realise this is a hacky way, but I need to override JS's alphabetical ordering
$scope.stepsKeys = _.keys($scope.steps);

$scope.activeStep = 0;

请注意 _.keys($scope.steps);是 LoDash 替换 Object.keys();

HTML：

<ul>
    <li ng-repeat="key in stepsKeys" ng-class="{active : stepsKeys[activeStep] == key}">{{ steps[key] }}</li>
</ul>

Answer 4

目前没有优雅的方式来做到这一点。原因是 - ngRepeat 创建了一个关联数组，它被称为而不是 JSON 本身。尽管 ECMAScript 标准提到：

必须保留对象属性的声明顺序，并且迭代必须以相同的顺序发生。

但不知何故，Angular 的人忽略了它。这可能会在以后的版本中得到纠正。

我仍然认为 Angular 的行为更有意义。由于对象通常比数组具有更多的初始化逻辑，我认为可以公平地假设顺序通常可能不是用户实际想要/期望的，因此强制特定排序确保正确的行为 - 特别是当我们还必须处理时使用旧版浏览器。