AngularJs ng-repeat orderBy не работает для свойств вложенных объектов

Question

I, m пытается ng-повторить свойства вложенных объектов и упорядочить их, но упорядочение не работает для меня.

Я видел это: How to orderby in AngularJS using Nested property

но структура JSON отличается, и я не мог заставить его работать.

Plunker

Мой код:

<div ng-repeat="item in data | orderBy:order.allListPosition"> 
     <div>{{item.name}} - {{item.order}}</div> 
    </div> 

Область:

$scope.data = { 
      "78962": { 
       "id": "78962", 
       "name": "item 2", 
       "type": "blind", 
       "order": { 
         "allListPosition": "008", 
         "catListPosition": "059" 
         }, 
       "data": { 
         "status": "stop", 
         "percent": 20 
         }, 
       "longPress": { 
         "item": "78966", 
         "active": true 
         } 
      }, 
      "78963": { 
        "id": "78963", 
        "name": "item 3", 
        "type": "coolmaster", 
        "order": { 
         "allListPosition": "053", 
         "catListPosition": "001" 
        }, 
        "data": { 
          "status": 1, 
          "temp": 16, 
          "point": 25, 
          "mode": "cool", 
          "fan": 3 
          }, 
       "longPress": { 
          "item": "78966", 
          "active": false 
          } 
       } 
      }; 

Может кто-нибудь пожалуйста, покажите мне, что я делаю неправильно?

много Thank в

Avi

Answer 1

Есть две причины orderBy не работает здесь:

• orderBy работает только с массивами, но вы применяете его к обычным объектам.
• Чтобы сделать заказ по выражению, вы должны указать orderBy строковое значение с выражением. Вы даете ему order.allListPosition, что приравнивается к $scope.order.allListPosition (которого не существует).

Чтобы решить первую проблему, добавьте массив ваших данных объектов:

$scope.dataArray = Object.keys($scope.data) 
    .map(function(key) { 
    return $scope.data[key]; 
    }); 

Для решения второй проблемы (и включить dataArray сверху):

<div ng-repeat="item in dataArray | orderBy:'order.allListPosition'"> 

http://plnkr.co/edit/BXgYPTElSM3sjvLg30CL?p=preview

Answer 2

Вы можете создать собственный фильтр для заказа по neasted свойствами.

myApp.filter('customorder', function() { 
    return function(items) { 
    items.sort(function(a,b){ 
     // Make sure we are comparing integers 
     var aPos = parseInt(a.order.allListPosition); 
     var bPos = parseInt(b.order.allListPosition); 

     // Do our custom test 
     if (aPos > bPos) return 1; 
     if (aPos < bPos) return -1;   
     return 0; 
    }) 
    } 
}); 

Ваш HTML будет выглядеть

<div ng-repeat="item in data | customorder"> 
    <div>{{item.name}} - {{item.order}}</div> 
</div> 

Вы всегда должны думать, что угловой не restritive язык. фильтры, которые вы обычно используете, - built in filters. Но вы можете получать удовольствие от своего фильтра, как только захотите!

Answer 3

Ваш объект data - объект объектов, а не массив объектов.

Поэтому orderBy не будет работать, так как он совместим только с массивами.

Я обновил свой data объект, чтобы сделать его работу:

$scope.data = [ 
      {    
       "id": "78961", 
       "name": "item 1", 
       "type": "blind", 
       "order":{allListPosition:"093",catListPosition: "009"}, 
       "data": { 
        "status": "up", 
        "percent": 80 
       }, 
       "longPress": { 
        "item": "78966", 
        "active": true 
       } 

      }, 
      { 
       "id": "78962", 
       "name": "item 2", 
       "type": "blind", 
       "order":{allListPosition:"008",catListPosition: "059"}, 
       "data": { 
        "status": "stop", 
        "percent": 20 
       }, 
       "longPress": { 
        "item": "78966", 
        "active": true 
       } 
      }, 
      { 

       "id": "78963", 
       "name": "item 3", 
       "type": "coolmaster", 
       "order":{allListPosition:"053",catListPosition: "001"}, 
       "data": { 
        "status": 1, 
        "temp": 16, 
        "point": 25, 
        "mode": "cool", 
        "fan": 3 
       }, 
       "longPress": { 
        "item": "78966", 
        "active": false 
       } 

      }]; 

И в HTML:

<div ng-repeat="item in data | orderBy:'order.allListPosition'"> 
    <div>{{item.name}} - {{item.order}}</div> 
</div> 

Plunker

Answer 4

Я уверен, что это должно быть:

<div ng-repeat="item in dataArray | orderBy:'item.order.allListPosition'">