I've struggling with the following:
I have a nested Object that I need to sort with ng-repeat-start:
$scope.docs = [{
April 2014:
0: {
year: 2014,
day: 23,
time: "20:35:45",
id: 54,
month: 4,
total: 38.02400000000001 },
1: {
year: 2014,
day: 12,
time: "20:35:45",
id: 54,
month: 4,
total: 11.02400000000001 }
},{
December 2015:
0: {
year: 2015,
day: 24,
time: "10:34:41",
id: 60,
month: 12,
total: 138.0420000001 },
1: {
year: 2015,
day: 12,
time: "11:05:17",
id: 75,
month: 12,
total: 21.0545001 },
2: {
year: 2015,
day: 12,
time: "18:05:17",
id: 78,
month: 12,
total: 158.21 }
}
]
Now I need to Show the header (April 2014..etc) in a sorted manner. I've used: http://forum.ionicframework.com/t/generating-list-with-dividers-dynamically/341/11
And i creates the desired result with one issue: As ng-repeat does not filter OBJECTS, the headers are sorted alphabetically, which you could see would pose a problem.
So I tried to convert the object to an array using a filter based the following example: http://jsfiddle.net/JHL6X/
.filter('toArray', function () {
'use strict';
return function (obj) {
if (!(obj instanceof Object)) {
return obj;
}
var result = [];
angular.forEach(obj, function(obj, key) {
obj.$key = key;
result.push(obj);
});
return result;
}
})
And call it in several way, including this:
<div class="list">
<ul>
<li class="item item-divider" ng-repeat="header in docs | toArray | orderBy:['-year','-month','-day','-time']">
{{header.$key}}
<li ng-repeat="doc in header">
<p>{{doc.month}}<span> {{doc.year}}</span></p>
</li>
</ul>
</div>
But only shows the header, but no items under them. Any ideas?
UPDATE: Using ng-repeat-start AND ng-repeat-end now shows all the data with its headers, but the ORDER is random and I can't find a way to arrange the headers properly (the content works with orderBy, but not the headers).