Question

当我使用ng-repeat（可能是一种无痛的方式）时，是否有人知道如何 SKIP 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的行为更有意义。由于对象通常比阵列具有更多的初始化逻辑，我认为假设订单通常可能不是用户实际想要/期望的那样是公平的，因此强制特定排序可确保正确的行为 - 特别是当我们还需要处理时使用旧浏览器。

在Angular JS中跳过重复JSON排序

4 个答案: