Пропуск ng-repeat JSON в Angular JS

Кто-нибудь знает, как я могу SKIP упорядочить JSON вообще, когда я использую ng-repeat (возможно, безболезненно)?

Например, мой источник 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, в конечном счете избегая сортировки по алфавиту.

Есть ли элегантный способ сделать это?

Ответы

Ответ 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

Ответ 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>

Ответ 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 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>

Ответ 4

На данный момент нет элегантного способа сделать это. Причина в том, что ngRepeat создает ассоциативный массив, который вызывается, а не сам JSON. Хотя в стандарте ECMAScript упоминается, что:

Порядок объявления свойств объекта должен быть сохранен, и итерация должна выполняться в том же порядке.

Но почему-то ребята Angular не обратили на это внимания. Это может быть исправлено в последующих выпусках.

Я все еще думаю, что поведение Angular имеет больше смысла. Поскольку объекты часто имеют больше логики инициализации вокруг них, чем массивы, я считаю справедливым предположить, что порядок часто может быть не тем, чего пользователь хочет/ожидал, поэтому принудительная сортировка гарантирует правильное поведение - особенно когда нам также приходится иметь дело с более старыми браузерами.