Angular orderBy object possible?
You should be able to define a custom sort function that sorts by any item in your object. The key bit is to convert the object to an array in the filter function.
Here's an example:
app.filter('orderByDayNumber', 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;
};
});
You would then call it like this:
<div ng-repeat="(key, val) in cal | orderByDayNumber: 'day' ">
Note, you shouldn't write val.day
as that is assumed.
Look at this great blog post here for more info.
EDIT: In fact, it looks like your structure is actually already an array, so while this technique will still work, it may not be necessary - it might have just been the way you were adding the parameter to orderBy that was causing issues.
Comments
-
byrdr almost 2 years
I have a JSON object representing calendar dates. These are added through a CMS and I'd like to be able to filter them based on date. My schema set-up has made this more difficult than I thought. Is it possible to orderBy the day value in this JSON object or is there a filter workaround?
Here is my JSON object:
{ "_id" : ObjectId("53f252537d343a9ad862866c"), "year" : { "December" : [], "November" : [], "October" : [], "September" : [], "August" : [], "July" : [ { "day" : "21", "title" : "Event Title", "summary" : "Event Summary", "description" : "oEvent Description", "_id" : ObjectId("53f252537d343a9ad862866d") } ], "June" : [], "May" : [], "April" : [], "March" : [], "February" : [], "January" : [] }, "__v" : 0 }
Here is my view which already uses a custom filter to filter by month. The orderBy is not functioning but I've left it in as a placeholder to show where I'd like to set the functionality.
<div class="calDynamic" data-ng-repeat="n in [] | range:100"> <div ng-repeat="cal in calendar[n].year | filterKey:month"> <div ng-if="cal != '' "> <div class="calendar"> <div ng-repeat="item in cal | orderBy: 'key.day' "> <a href="/events/{{item.day}}"> <article class="eventslist"> <div class="numberedDate"> <h3>{{item.day}}</h3> </div> <div class="calInfo"> <h5>{{item.title}}</h5> <p>{{item.summary}} <a>more</a></p> </div> </article> </div><!-- ng-repeat val,key --> </div><!-- calendar --> </div><!-- ng-if cal --> </div><!-- ng-repeat cal --> </div><!-- calDynamic -->