2014-09-06 5 views
1

Я пытаюсь перебрать ответ JSON и сортировать по другим ключом пары значений в объекте (значение объекта порядка, но похоже, что в настоящее время работает для меня.OrderBy не работает, как ожидалось

Может Я переформатировать объект по-другому, что я не мог думать так далеко?

я там что-нибудь, что я могу сделать в Угловое?

HTML

<div ng-app="myApp" ng-controller="Ctrl"> 
    <div ng-repeat="item in myCards"> 
     <h1>Title: {{item.title}}</h1> 

     <div ng-repeat="(blockName, majorBlock) in item.blocks | orderBy:'order'"> 
      <h2>Name: {{blockName}}, Order: {{majorBlock.order}}</h2> 
     </div> 

    </div> 
</div> 

JS

angular.module('myApp', []) 
    .controller('Ctrl', function($scope) { 
     $scope.myCards = { 
      template: { 
       tagline: 'Tagline', 
       url: 'url', 
       title: 'My Title', 
       blocks: { 
        'cover': { 
         "coverUrl": "http://www.url.com/cover/", 
         "coverImage": "http://www.url.com/cover/", 
         "order": '1' 
        }, 
        'text': { 
         "headerText": "amet anim est eu enim in incididunt cillum reprehenderit proident", 
         "order": '2' 
        }, 
        'products_block': { 
         'order': '3' 

        } 

       } 
      } 
     }; 
    }); 

Fiddle: http://jsfiddle.net/fvdb3d3p/

Я попробовал несколько хаков, с orderByArray плагин, но они ломаются остальную часть цикла.

ответ

1

Проблема заключается в том, что $scope.myCards.template.blocks является объектом, а не Array, вы можете перебирать объект с ng-repeat, но фильтр orderby работает только с массивами, как вы можете увидеть в документации API: https://docs.angularjs.org/api/ng/filter/orderBy

Вы МАЯ хочу написать для этого специальный фильтр.

EDIT:

Я нашел пользовательский фильтр под названием "orderObjectBy" из: http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/

yourApp.filter('orderObjectBy', function() { 
    return function(items, field, reverse) { 
    var filtered = []; 
    angular.forEach(items, function(item) { 
     filtered.push(item); 
    }); 
    filtered.sort(function (a, b) { 
     return (a[field] > b[field] ? 1 : -1); 
    }); 
    if(reverse) filtered.reverse(); 
    return filtered; 
    }; 
}); 

EDIT:

Я отлажены оригинальную функцию фильтра, так что у вас есть доступ к key вашего объекта, измененная версия выглядит так:

.filter('orderObjectBy', function() { 
    return function(items, field, reverse) { 
    var filtered = []; 
    angular.forEach(items, function(item, key) { 
     item.originalKey = key; 
     filtered.push(item); 
    }); 
    filtered.sort(function (a, b) { 
     return (a[field] > b[field] ? 1 : -1); 
    }); 
    if(reverse) filtered.reverse(); 
    return filtered; 
    }; 
}) 

пример: http://jsfiddle.net/fvdb3d3p/2/

+0

спасибо за Ваш ответ, к сожалению, этот сценарий изменяет свои имена узлов: http://jsfiddle.net/zped9wLs/ –

+0

@AdrianFlorescu Я просто сделал правку в пользовательскую функцию, так что вы можете получить доступ к исходному ключу. – Josep

+0

@AdrianFlorescu делает этот ответ, чтобы решить ваш вопрос? Если это так, пожалуйста, примите его, если это не объясняет почему. Благодаря! – Josep

Смежные вопросы