我正在尝试按星期几和一天中的时间为班级列表中的过滤结果创建自定义顺序。到目前为止，我什至无法使下拉菜单以这种方式显示（当前显示的是字母顺序）。
I found this其他线程似乎正在回答我的问题，但似乎无法使其正常工作。这是我的代码：
(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;
};
/* $scope.weekdays = [
{date: 'Wednesday'},
{date: 'Monday'},
{date: 'Tuesday', time:'9:30 a.m. - 10:30 a.m.'},
{date: 'Tuesday', time:'9:30 a.m. - 10:30 a.m.'},
{date: 'Thursday', time:'9:30 a.m. - 10:30 a.m.'},
{date: 'Monday', time:'1:30 p.m. - 2:30 p.m.'}];*/
});
app.filter('customSorter', function() {
function CustomOrder(item)
{
switch(item) {
case 'Monday':
return 1;
case 'Tuesday':
return 2;
case 'Wednesday':
return 3;
case 'Thursday':
return 4;
}
}
return function(items, field) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (CustomOrder(a.date) > CustomOrder(b.date) ? 1 : -1);
});
return filtered;
};
});
/** All the Data **/
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:"Jump On The Highway: TransactNOW and eDocs Speed Up Client Servicing By Reducing Double-Entry", role:"Administrators", skill:"Intermediate", date: 'Thursday', time: '9:30 am - 10:30 am', location:'Room 101', description:" As we move down the data highway, we'll look at PL Rating, Reference Connect, TransactNOW and eDocs to increase your efficiency. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:'Joyce Sigler'},
{
track:"AMS360", name:"Accounting: Customer Center Invoicing",
role:"Accounting", skill: "Basic", date: 'Monday', time: '1:00 pm - 2:00 pm', location:'Room 101',
description:" This class will review how to bill using the customer center. We will focus on Agency Billed invoicing, reviewing transaction premium and fees, full pay and installments. We'll look at the register view and invoice view, voids and corrections & more.", instructors:'Joyce Sigler'},
{track:"Sagitta", name:"The Ins and Outs of Data Entry - Commercial", role:"All - Commercial", skill:"Int/Adv", date:'Thursday', time: '8:00 am - 9:00 am', location:'Room 101', description: "Whether it's manual entry, download, or import, do you know what's needed to have complete and accurate data in Sagitta? Do you have all of the data to produce eForms? Join this course to learn where your data goes and why it is so important to the submission and binding workflow.", instructors:'Joyce Sigler'},
{track:"Sagitta", name:"Personal Lines Open Forum", role:"All - Personal", skill:"Int/Adv", date:'Tuesday', time: '8:00 am - 9:00 am', location:'Room 101', description:"Meet with your peers in Personal Lines and discuss topics such as new business and renewals, handling high net worth clients, handling policies with carriers that do not have carrier download, Personal Lines Workflows in ImageRight, Policy Alerts and download reports. Bring any other Personal Lines topics or questions for discussion.", instructors:'Joyce Sigler'},
{track:"Sagitta", name:"Let's Get Fiscal - Accounting Personalization", role:"Accounting;Admin", skill:"Int/Adv", date:'Tuesday', time: '8:00 am - 9:00 am', location:'Room 101', description:"Are you letting Sagitta do some of your work for you? What are all those fields in INS.POST, Accounting Flags, etc.? There may be settings in Accounting Personalization that could make your life easier.", instructors:'Joyce Sigler'},
{track:"Sagitta", name:"Personalization - Make it Work",
role:"Admin", skill:"Int/Adv", date:'Tuesday', time: '8:00 am - 9:00 am', location:'Room 101', description:"With Sagitta releases, often personalization upgrades come along. This session will review personalization pages that will enhance your agencies daily workflow. This class will not cover Accounting personalization.", instructors:'Joyce Sigler'},
{track:"Sagitta", name:"Achieving a Successful Submission and Binding - Commercial", role:"All - Commercial", skill:"Int/Adv", date:'Tuesday', time: '8:00 am - 9:00 am', location:'Room 101', description:"Continuing the process from Ins & Outs, here we will learn what it takes to complete the submission workflow, kick off the binding workflow, and track your carrier responses using ImageRight.", instructors:'Joyce Sigler'},
{track: "BenefitPoint", name: "Mergers & Acquisitions", date: "Thursday", time: "8:00 am - 9:00 am", location: "Room 101", role: "All", skill: "Intermediate/Advanced", description: "Join us for a conversation on BP Best Practices and considerations around the conversion process, both from the perspective of the acquirer and acquired.", instructors: "— Coming Soon" },
{track: "BenefitPoint", name: "Large Agency Round Table", date: "Thursday", time: "8:00 am - 9:00 am", location: "Room 101", role: "All", skill: "All", description: "What factors are at play for small agencies when it comes to BenefitPoint? What are some general considerations and Best Practices? Get ready for some small group discussions on small agency considerations like training, system administration, using RTM, and more.", instructors: "— Coming Soon" },
{track: "BenefitPoint", name: "BP Trade Secrets", date: "Thursday", time: "8:00 am - 9:00 am", location: "Room 101", role: "All", skill: "Intermediate/Advanced", description: "What's your agency's 'secret sauce' when it comes to BP? What firm settings do you have turned on that you find beneficial? What do you do behind the scenes to make BP work for your agency? Get ready to learn a tip or two and join the conversation.", instructors: "— Coming Soon" },
/*ImageRight*/
{track: "ImageRight", name: "Workflow Studio-What's It All About? Join This Campfire session to Hear Others Describe What It's Done For Them ", date: "Tuesday", time: "8:00 am - 9:00 am", location: "Room 101", role: "Administrator", skill: "Intermediate", description: "Have you settled in to using the workflows and are ready to consider how you may be able to tweak your existing workflows or what's entailed to create new ones? If so, this session will provide a high level overview of workflow best practices. It will provide examples of current uses that just might spark some ideas for you and your team.", instructors: "— Coming Soon" },
{track: "ImageRight", name: "Workflow Studio Potluck: Bring A Current Workflow To Share", date: "Tuesday", time: "8:00 am - 9:00 am", location: "Room 101", role: "Administrator", skill: "Advanced", description: "Have you already started on the appetizers (tweaking and creating workflows) and now you are ready for the entrees? Joining this session will provide you with an array of options to take your workflows to the next level. This session is tailored toward those admins with programming experience who are familiar with Workflow Studio. Don't forget to bring your favorite to share!", instructors: "— Coming Soon" }
];
return {
getAll: function(){
return accelerates;
}
};
});
}());html,body {
margin: 0;
padding: 20px;
font-family:Verdana, sans-serif;
}
ul,li {
padding: 0;
margin: 0;
list-style: none;
font-family:Verdana, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.filter-form {
height: 300px;
width:100%;
}
.filter-item {
background: #fff;
min-height: 30px;
padding: 5px 10px;
color: #333;
border-bottom: solid 1px #ed601a;
width: 100%;
}
.filter-options {
display: flex;
margin-bottom: 20px;
}
.filter-option {
margin: 0 10px;
}
label, select, .filter-clear-button {
margin-left: 10px;
padding:10px;
float:left;
}
select .filter{
max-width:20%;
}
.filter-item h4{
font-weight:bold;
}
/* Education Sessions */
.ed-session {
width: 100%;
min-height: 150px;
margin: 5px;
padding:10px;
float: left;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
border-bottom: 2px #ed601a solid;
}
.ed-session:hover{
-ms-transform: scale(1.02); /* IE 9 */
-webkit-transform: scale(1.02); /* Safari 3-8 */
transform: scale(1.02);
/* background-color:#333;
color:#fff;
font-size:15px;*/
}
.session-title{
font-weight: 800;
font-size:18px;
}
.track-system{
color:#ed601a;
}
.desc {
margin:10px 0px;
font-size: 15px;
transition: all 0.4s ease-in-out 0s;
}
.specifics{
font-size:14px;
border-left: 2px solid #ddd;
/*margin-left: 25px;*/
padding:5px;
}
.small-text{
/* font-weight:bold;*/
color:#808080;
border-right: 2px solid #ddd;
margin-right:5px;
/*background-color:#ccc;*/
}
@media (max-width: 500px) {
select{
width:100%;
float:right;
}
label{
width:100%;
margin:0px auto;
text-align:left;
}
}
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<!-- 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 | customSorter:'date'" 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>
</body>
</html>