在 Angularjs 中创建自定义顺序以按星期几顺序显示过滤结果

Creating a custom order in Angularjs for displaying filtered results by day of the week order

我正在尝试为包含 angularjs 过滤结果的页面创建自定义顺序,以显示按星期几排序的 类 时间表。如 "Monday - class, Tuesday - class, Wednesday - class."

此时,过滤前,内容显示在代码位置,过滤后,按字母(?)顺序显示。

"Days" 的下拉菜单也按字母顺序显示,而不是星期几。

我希望显示天数下拉菜单、默认结果以及按星期几排序的结果。

<!-- 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>

而 JS 是

(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;
            }
       };
    });
}());

这不是 正确的 答案,但它是满足我们需求的解决方法。我添加了数字日期,后跟破折号,然后 然后 添加了星期几。我为此感到自豪吗,不,但至少项目向前推进了。如果有人知道真正的解决方案,请告诉我!

(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;
    };
});


 


 /** All the Data **/
  app.factory("accelerateData", function(){

    var accelerates = [
     

{  track:"AMS360, VAP, ImageRight", name:"What's New with AMS360 and Vertafore Agency Platform", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Exhibit Hall B", description:"In this session, Vertafore leaders will review the latest releases of AMS360, and give you a peek into what's next for this amazing product.", instructors:"Sharmila Ray-Vertafore, Dave Acker-Vertafore" },
{  track:"Sagitta, ImageRight", name:"What's New - Sagitta", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Jr Ballroom A", description:"In this session, Vertafore leaders will review the latest releases of Sagitta and give you a peek into what's next for this amazing product.", instructors:"Bruce Westman - Sagitta Product Manager - Vertafore" },
{  track:"AIM", name:"What's New in AIM & AIM Accounting", role:"All", skill:"Beginner", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Jr Ballroom B", description:"Come and learn all that is new in AIM and AIM Accounting.", instructors:"Cameron Elisha (Vertafore), Neville Allen (Vertafore), Michele Clubb (Vertafore)" },
{  track:"QQCatalyst", name:"Welcome to Accelerate!", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 2:15 PM", location:"Jr Ballroom C", description:"Whether you're a QQCatalyst user attending Accelerate for the first time or just want an overview of the Executive Track presentations, this session will help you get the most out of your time with us and highlight important content where you can learn how to build a world-class agency.", instructors:"Rich Park-Vertafore" },
{  track:"BenefitPoint", name:"BP Product Roadmap", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Jr Ballroom D", description:"Join us for a sneak peak at what Vertafore is working on right now for BenefitPoint!", instructors:"Michelle Lewis- Director Product Management-Vertafore" },
{  track:"Executive Management", name:"Leading Agency Evolution", role:"Senior Level/Executive", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"S-232/233", description:"Steve interviews Vertafore CEO Amy Zupon on a range of topics such as her vision for agency evolution, technology investment priorities and how Vertafore is responding.", instructors:"Amy Zupon, CEO, Vertafore; Steve Anderson" },
{  track:"Carrier Focus", name:"Getting and keeping your agents producing with Sircon", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"S-236", description:"Getting authorized to sell doesn't have to be a hassle. Learn how Sircon connected compliance provides simple ways for agents to get in, get licensed, and get selling.", instructors:"Patrick Masi" },
{  track:"Carrier Focus", name:"MythBusters – Unlocking the mysteries of the market", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"S-237/238", description:"What does 0 Billion of in-force policy data reveal about market trends? What can 6 million monthly rating transactions tell us about pricing? What can the appointments and other sales credentials of 1,000 carriers tell us about industry relationships? In this session, we share some myth busting insights we've learned by digging into the data of Vertafore products.", instructors:"TBD" },
{  track:"Carrier Focus", name:"Uncover price, product, and market opportunities with RiskMatch", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"W-260/261", description:"With a dataset of 0B of in-force policies, RiskMatch enables Insurers to identify market trends, assess alignment of execution with underwriting appetite and to create visibility into an opportunity set of business you don’t write today. With the launch of RiskMatch Market Insights, Vertafore is providing carriers with a unique view of the market that will help you turn data into growth and efficiency.", instructors:"John Mollica" },
{  track:"QQCatalyst", name:"What's New", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:15 PM - 3:00 PM", location:"Jr Ballroom C", description:"We're investing in QQCatalyst . . .  come be among the first to see what we have in store for QQCatalyst this year!", instructors:"Justin Silverman-Vertafore" },
{  track:"ImageRight-AMS360/VAP-Sagitta-AIM", name:"What's New in ImageRight?", role:"Admin, End User", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Exhibit Hall B", description:"The Team at Vertafore has been hard at work.  Gather around the campfire to see and hear all about the amazing new features in the latest release. Then while the fire is hot, stick around to see where the trail will take us next and provide input on which direction you would like it to go.", instructors:"Vijay Muniswamy-Sr. Product Manager-Vertafore, Steven Finch, VP Product Management, Deb Ward-Manager, Solutions Consulting" },
{  track:"AMS360/VAP", name:"Words matter:  Learn the Latest on eDocs, Text Setups and eForms", role:"Administrators", skill:"Intermediate", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom A", 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, Geoff Lynch-Vertafore" },
{  track:"AMS360/VAP", name:"AMS360 18R1 Release:  Hear from Users How They Are Using These New Features", role:"Account Manager", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom B", description:"Join this group discussion about how fellow users have implemented and benefited from the newest features released with 18R1.", instructors:"Angela Painter-Angela Adams Consulting, Justin Silverman-Vertafore" },
{  track:"AMS360/VAP", name:"Financial Center Overview & Accounting Tips (RJE)", role:"Accounting", skill:"Intermediate/Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom C", description:"This is where all the information flows! Come see how to keep track of unprinted checks or invoices. Check receipts that need to be deposited or Direct Bill Deposit Payments that haven't been fully processed. Cover Daily Process, track commissions, accounts current and Vendor Payables all in one place! There is so much here. Recommended for those studying for Accounting Certification.", instructors:"Janet Tuttle, Whitney Malone, Barb Wold-Vertafore" },
{  track:"AMS360/VAP", name:"What's New in Accounting", role:"Accounting", skill:"Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom D", description:"It's finally our turn! Come find out how much has been added to Accounting functionality in the 18R1 and 18R2 releases.", instructors:"Lorraine Plezia, Janice Pierson-Vertafore" },
{  track:"BenefitPoint", name:"Large Agency Round Table", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-206", description:"What factors are at play for large agencies when it comes to BP? What are some general considerations and best practices? Get ready for some small group discussions on large agency considerations including integration with other projects like Sagitta and ImageRight, state and regional differences, national conventions, training and much more!", instructors:"Victoria Jackson - Marsh & McLennan Agency, Deb Smith- HUB, Teddy Dimulous-Vertafore" },
{  track:"BenefitPoint", name:"Small Agency Round Table", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-207/208", 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:"Gary Bossert-VP Administration-Medical Mutual Group, Michael Arias-Senior Account Manager-JGS Insurance, Sharmila Ray-Vertafore" },
{  track:"Sagitta", name:"Booked and Loaded - Producer Payments", role:"Accounting;Admin", skill:"Intermediate/Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-209", description:"How do you track your payments to producers? Are you manually tracking your producer payments? Find out how you can utilize the Producer Payable tools in Sagitta to automate the process. We will discuss adding default commission rates for your producers as well as utilization of the pol multi functionality for out of the ordinary commission splits.", instructors:"Ed Navalany - CFO - Szerlip & Company Inc., Allyne Miller - Operations Manager - Allen Lawrence & Associates, LLC, Kim Buck - Controller - Haylor Freyer & Coon Inc., Jennifer Salvini-Vertafore" },
{  track:"Sagitta", name:"Before and After the Fire - Security/Disaster Recovery", role:"Admin", skill:"Intermediate/Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-210", description:"Today’s risks to our business look very different than yesterday. Have you looked at your Security Incident Response, Disaster Recovery or Business Continuity plans recently? Find out how Password Reset and Security questions and help round out your strategy and hear from other agencies how they have evolved their systems and plans to keep our most critical applications servicing clients.", instructors:"Bill Henson -Director - Customer Success Technical Manager - Vertafore, Michelle Hoffert - Director of IT - Lanier Upshaw Inc" },
{  track:"QQCatalyst", name:"Building the future - how we're revolutionizing QQCatalyst", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:00 PM", location:"S-230/231", description:"Come to hear from our CEO on how QQCatalyst will lead the way in agency innovation by producing the next generation of salesroom, a full suite of APIs, commerical lines expansions, and beyond…", instructors:"Amy Zupon, CEO, Vertafore" },
{  track:"Executive Management", name:"How to Become A Top Performing Agency", role:"Senior Level/Executive", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"S-232/233", description:"Each year a small number of agencies earn the prestigious status of “Best Practices Agency,” and the resulting industry recognition and exclusive benefits. In this session, we’ll learn how you can achieve this level of performance by adopting Best Practice strategies developed from studying top agencies for 25 years.", instructors:"Tom Doran, Partner, Reagan Consulting" },
{  track:"Carrier Focus", name:"What can Artificial Intelligence & Machine Learning do for insurance distribution?", role:"All", skill:"", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"S-236", description:"It should come as no surprise to you that Artificial Intelligence and Machine Learning (AI/ML) are core technologies that are already transforming our industry, along with most others. What it AI/ML, and how significant a role will it play in our future? We are excited to share our thoughts on this topic, solicit your feedback on where you see AI/ML having positive impact today and discuss the best areas to  apply AI/ML to solve key problems for the insurance industry.", instructors:"Greg Ingino" 
},
{  track:"Carrier Focus", name:"Sign-on Once – Implementing ID Federation (VCF)", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"S-237/238", description:"A major pain point for independent agents is managing the many login credentials they use daily to do business with their carrier partners. An easy and secure solution is a top need for both agents and carriers, and Vertafore has been listening. ID Federation has come a long way to addressing these needs, and has made great strides over this past year!  We'll share the latest on how your Vertafore agents are enjoying working with federated carriers today, and what you can do to implement federation for your Vertafore agents.", instructors:"Dave Acker, Irv Kantar" },
{  track:"AIM", name:"AIM Document Designer Basics", role:"Administrator", skill:"Beginner", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"W-250", description:"This session will cover the basics of the document parameter and designer screens in order to provide foundational knowledge for creating simple to complex document templates.", instructors:"Danny Journeay (Specialty Insurance Mgrs), Kristi Newlin-Vertafore" },
{  track:"AIM", name:"Basic & Advanced AIM Accounting Security", role:"Accounting", skill:"Beginner", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"W-251", description:"AIM Accounting has an enhanced security feature that allows you to establish access within each module. This session will review the default accounting security, enhanced security feature, and how to create security privileges.", instructors:"John Salmon (RT), Michele Clubb-Vertafore" },
   {  track:"Executive Management-AMS360/VAP-Sagitta-QQCatalyst-ImageRight", name:"Leveraging RiskMatch:  Your own crystal ball", role:"All", skill:"All", date:"5/22/19 - Wednesday", time:"3:30 PM - 4:30 PM", location:"W-264", description:"Learn what is driving revenue gains and losses.  Visualize team work capacity.  Explore revolutionary tools that look ahead to predict revenue changes.  Use Risk Profile reports to identify white space and cross sell opportunities.", instructors:"Brent Rineck-CIO-ABD Insurance and Financial Services" },
{  track:"AMS360/VAP", name:"AMS360:  Proposal Builder", role:"All", skill:"Intermediate", date:"5/23/19 - Thursday", time:"8:30 AM - 9:30 AM", location:"Exhibit Hall B", description:"Vertafore is launching the new proposal builder tool for AMS360 and Sagitta customers. This modern and intuitive tool will allow your agency to more easily pull information from your management system into professional looking and customizable templates to present to customers and prospects. Come see a demo of this feature and learn more about how to get started using it.", instructors:"Justin Silverman-Vertafore" },
{  track:"AMS360/VAP", name:"Using Data for Daily Tasks:  Learn How Target Lists and Form Letters Work to Streamline Communications", role:"Administrators", skill:"Intermediate", date:"5/23/19 - Thursday", time:"8:30 AM - 9:30 AM", location:"Jr Ballroom A", description:"Let's look at the daily tasks that gibe you the ability to look at your data and let the system do the heavy lifting. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:"Joyce Sigler, Geoff Lynch-Vertafore" },
{  track:"AMS360/VAP", name:"What's In The Batters Box:  See What's Next with Renewal Tool and Expiring Source", role:"Account Manager", skill:"Basic", date:"5/23/19 - Thursday", time:"8:30 AM - 9:30 AM", location:"Jr Ballroom B", description:"A comprehensive review of the Renewal Tool and Expiring Source.", instructors:"TBA, Marti Fox, Barbara Wold-Vertafore" },
{  track:"BenefitPoint", name:"Day 3 Q & A", role:"All", skill:"All", date:"5/23/19 - Thursday", time:"11:00 AM - 12:00 PM", location:"W-263", description:"After a day of learning let's end the day with a panel discussion. Join the conversation to share what you learned, ask questions that you haven't gotten answered, and share your ideas with the development team about how you want to see BenefitPoint grow and change in the future.", instructors:"Chris Walters, Mindy Day, Michelle Lewis, Gary Bossert, Angela Minutaglio, Tony Franza" }


    ];

    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;
  margin-bottom:5px;
}
.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>Date:</label>
      <select class="filter" ng-model="selectedYear" ng-options="year for year in years | orderBy:'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 | orderBy : 'date' | 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/> 
        Date:  <b>{{accelerate.date }} </b>| {{accelerate.time }}</b> | Room:{{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>