Пользовательский заказBy для вложенных объектов в AngularJS

Question

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

Я использую угловой с ng-repeat, чтобы пересечь мои объекты. Было бы здорово расширить это с помощью настраиваемого фильтра (так что я могу создать несколько полей порядка)

Я искал на SO, но я не нашел хороших решений для такого типа объектов.

Обновление Все поля validUntil являются метками времени эпохи. Поэтому мой вывод должен выглядеть как восходящий или нисходящий в поле validUntil. Возможно ли это? Я думаю, мне нужно разбить мой блокнот и объекты вентиляторов друг от друга и создать новый массив для достижения этого?

[{ 
    "19852" : { 
    "checkins" : { 
     "-KJk_QqoIMQi_XT4V-e8" : { 
     "called" : false, 
     "createdAt" : 1465398937, 
     "daysBetween" : 22, 
     "new" : 2000, 
     "old" : 996, 
     "ratio" : 45.54545454545455, 
     "type" : "checkins", 
     "validUntil" : 1467324000 
     } 
    }, 
    "fans" : { 
     "-KLL5pZsdZu2lAbmIuED" : { 
     "called" : false, 
     "createdAt" : 1467102227, 
     "daysBetween" : 3, 
     "new" : 500, 
     "old" : 173, 
     "ratio" : 109, 
     "type" : "fans", 
     "validUntil" : 1467324000 
     }, 
     "-KLLqu_BT6cIVf-ALJMA" : { 
     "called" : false, 
     "createdAt" : 1467114826, 
     "daysBetween" : 2, 
     "new" : 600, 
     "old" : 174, 
     "ratio" : 213, 
     "type" : "fans", 
     "validUntil" : 1467324000 
     } 
    }, 
    "name" : "Test 1" 
    }, 
    "-KCGLvKjmF0dxe8QuAXh" : { 
    "checkins" : { 
     "-KLRVY9FAzHDPTIf1_qS" : { 
     "called" : false, 
     "createdAt" : 1467209626, 
     "daysBetween" : 32, 
     "new" : 4000, 
     "old" : 3699, 
     "ratio" : 6.9, 
     "type" : "checkins", 
     "validUntil" : 1470002400 
     } 
    }, 
    "name" : "Test 2" 
    }, 
    "-KKOX2JDkM84jrZcHHq4" : { 
    "fans" : { 
     "-KL253oeqDFedCRpDV4a" : { 
     "called" : false, 
     "createdAt" : 1466783256, 
     "daysBetween" : 6, 
     "new" : 10, 
     "old" : 1, 
     "ratio" : 1.5, 
     "type" : "fans", 
     "validUntil" : 1467324000 
     } 
    }, 
    "name" : "Test 3" 
    } 
}] 

Answer 1

Удовлетворён. Угловой заказ заказа не разрешен. Чтобы обойти это, вы можете либо преобразовать объект в массив самостоятельно, либо создать новый фильтр, чтобы сделать это за кулисами.

Вот как это сделать с помощью настраиваемого фильтра. Обратите внимание, что функция getMinValue рекурсивна и не обрабатывает циклические ссылки (они будут продолжать вращаться). Если вы столкнулись с этим как проблема, вам просто нужно будет изменить эту функцию, чтобы не рекурсивно вызывать определенные ключи.

Вот Javascript код:

angular.module("myApp", []).filter('orderObjectBy', function(orderByFilter) { 
    return function(items, sortPredicate, reverseOrder) { 
    var array= []; 
    angular.forEach(items, function(item) { 
     array.push(item); 
    }); 
    return orderByFilter(array, sortPredicate, reverseOrder); 
    }; 
}).controller('someController', function ($scope) { 
    $scope.order = function(obj){ 
     return getMinValue(obj); 
    }; 
    function getMinValue(obj){ 
     //this is a recursive call that will look through all of the objects to find the minimum validUntil. Be careful because circular references will loop forever. 
     //if you believe you might have circular references, then there are small changes you can make to account for that. It just didn't seem necessary for your code. 
     var minValidUntil = null; 
     angular.forEach(obj, function(item) { 
      var validUntil = item.validUntil; 
      if(validUntil == null && angular.isObject(item)){ 
       validUntil = getMinValue(item); 
      } 
      if(validUntil != null && (minValidUntil == null || validUntil < minValidUntil)){ 
       minValidUntil = validUntil; 
      } 
     }); 
     return minValidUntil; 
    } 
    $scope.data = { 
     "19852" : { 
     "checkins" : { 
      "-KJk_QqoIMQi_XT4V-e8" : { 
      "called" : false, 
      "createdAt" : 1465398937, 
      "daysBetween" : 22, 
      "new" : 2000, 
      "old" : 996, 
      "ratio" : 45.54545454545455, 
      "type" : "checkins", 
      "validUntil" : 1467324000 
      } 
     }, 
     "fans" : { 
      "-KLL5pZsdZu2lAbmIuED" : { 
      "called" : false, 
      "createdAt" : 1467102227, 
      "daysBetween" : 3, 
      "new" : 500, 
      "old" : 173, 
      "ratio" : 109, 
      "type" : "fans", 
      "validUntil" : 1467324000 
      }, 
      "-KLLqu_BT6cIVf-ALJMA" : { 
      "called" : false, 
      "createdAt" : 1467114826, 
      "daysBetween" : 2, 
      "new" : 600, 
      "old" : 174, 
      "ratio" : 213, 
      "type" : "fans", 
      "validUntil" : 1467324000 
      } 
     }, 
     "name" : "Test 1" 
     }, 
     "-KCGLvKjmF0dxe8QuAXh" : { 
     "checkins" : { 
      "-KLRVY9FAzHDPTIf1_qS" : { 
      "called" : false, 
      "createdAt" : 1467209626, 
      "daysBetween" : 32, 
      "new" : 4000, 
      "old" : 3699, 
      "ratio" : 6.9, 
      "type" : "checkins", 
      "validUntil" : 1470002400 
      } 
     }, 
     "name" : "Test 2" 
     }, 
     "-KKOX2JDkM84jrZcHHq4" : { 
     "fans" : { 
      "-KL253oeqDFedCRpDV4a" : { 
      "called" : false, 
      "createdAt" : 1466783256, 
      "daysBetween" : 6, 
      "new" : 10, 
      "old" : 1, 
      "ratio" : 1.5, 
      "type" : "fans", 
      "validUntil" : 1467324000 
      } 
     }, 
     "name" : "Test 3" 
     } 
    }; 
}); 

Вот HTML, который я использовал для тестирования:

<div ng-app="myApp" ng-controller="someController"> 
    <div ng-repeat='obj in data | orderObjectBy: order'> 
     <span>{{obj.name}}</span> 
     <div ng-repeat='checkin in obj.checkins'> 
      <span>checkin - {{checkin.validUntil}}</span> 
     </div> 
     <div ng-repeat='fan in obj.fans'> 
      <span>fan - {{fan.validUntil}}</span> 
     </div> 
     <br /><br /> 
    </div> 
</div>