I'm trying to create a custom order for a page of angularjs filtered results to display a schedule of classes ordered by the day of the week. As in "Monday - class, Tuesday - class, Wednesday - class."
Right now, before filtering, the content displays in code position and after filtering, it displays by alphabetical (?) order.
The dropdown menu for "Days" also displays in alphabetical order rather than day of the week order.
My hope is to display the Days drop-down menu, the default results, and the sorted results in day of the week order.
<!-- Main Content --->
<body ng-app="app" class="container">
<div ng-controller="mainController">
<h1>Accelerate Education Sessions</h1>
<label>Track:</label>
<select class="filter" ng-model="selectedTrack" ng-options="track for track in tracks" class="form-control"> </select>
<label>Days:</label>
<select class="filter" ng-model="selectedYear" ng-options="year for year in years" class="form-control"></select>
<label>Role:</label>
<select class="filter" ng-model="selectedRole" ng-options="role for role in roles" class="form-control"></select>
<button class="filter-clear-button" ng-click="clearFilters()">Clear</button>
<table class="table">
<tbody>
<div ng-repeat="accelerate in accelerates | filter:{ track: selectedTrack, date:selectedYear, role:selectedRole}">
<div class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
{{accelerate.date }} | {{accelerate.time }}</b> | {{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></div>
</div>
</tbody>
</table>
</div>
<div class="filter-form">
<ul class="filter-items" ng-repeat="accelerate in accelerates | filter:{ track:selectedTrack, date:selectedDate, name:selectedName}">
<li class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
{{accelerate.date }} | {{accelerate.time }}</b> | {{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></li>
</ul>
</div>
</div>
and the JS is
(function(){
var app = angular.module("app", []);
app.controller("mainController", function($scope, accelerateData) {
$scope.accelerates = accelerateData.getAll();
$scope.roles = _.chain($scope.accelerates).pluck("role").uniq().sortBy().value();
$scope.tracks = _.chain($scope.accelerates).pluck("track").uniq().sortBy().value();
$scope.years = _.chain($scope.accelerates).pluck("date").uniq().sortBy().value();
$scope.clearFilters = function(){
$scope.selectedTrack = undefined;
$scope.selectedYear = undefined;
$scope.selectedRole = undefined;
};
});
app.factory("accelerateData", function(){
var accelerates = [
/** AMS360**/
{ track:"AMS360", name:"Words matter: Learn the Latest on eDocs, Text Setups and eForms",
role:"Administrators", skill:"Intermediate", date: 'Wednesday', time: '11:00 am - 12:00 pm', location:'Room 101', description:"We will be taking a look at eDoc delivery, connectivity, text setups and eForms. This session will be supplemented with continuing webinars offered by NetVU following conference." , instructors:'Joyce Sigler'},
{track:"AMS360", name:"All in the Family: How to Use AMS360 Data to Sort Out Acquisitions, Business Origin and Relationships",
role:"Administrators", skill:"Intermediate", date: 'Tuesday', time: '11:00 am - 12:00 pm', location:'Room 101',
description:"Releases 18r1 and 18r2 give us additional opportunities of how to classify our business, book commissions, set up relationships. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:'Joyce Sigler'},
{track:"AMS360", name:"You Say What? Learn How to Have Data Pushed to You through Alerts, Scheduled Reports and My Agency Reports",
role:"Administrators", skill:"Intermediate", date: 'Tuesday', time: '11:00 am - 12:00 pm', location:'Room 101',
description:" Mirror, mirror on the wall, let me see the beauty of it all. Letting your data come to you. Learn about Alerts, Scheduled Reports, My Agency Reports, WorkSmart Process Dashboard and Process Analytics. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:'Joyce Sigler'},
{
track:"AMS360", name:"Getting Cozy: Merging customers",
role:"Administrators", skill:"Intermediate", date: 'Tuesday', time: '1:00 pm - 2:00 pm', location:'Room 101',
description:" NEW with 18r2 - Let's talk about what happens when we can merge customers together. When two becomes one! This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:'Joyce Sigler'}
];
return {
getAll: function(){
return accelerates;
}
};
});
}());
This isn't a true answer, but it was a work-around that met our needs. I added the numerical date followed by a dash and then added the day of the week. Am I proud of this, no, but at least the project moved forward. If anyone knows of a true solution, please let me know!