Я пытаюсь связать три компонента моего фильтра в Angular js: трек, дни и роль.Я хочу убедиться, что если я выберу что-то в раскрывающемся списке один, а затем выберу другой вариант в раскрывающемся списке два, он фильтрует содержимое только из результатов первого раскрывающегося списка.
Прямо сейчас каждый фильтр действует независимо ... sigh
var app = angular.module('myApp', []);
app.controller('FilterCtrl', function() {
var vm = this;
vm.filterValue = "";
vm.filterData = [
/** AMS360**/
{track:"AMS360", name:"What's New with AMS360 and Vertafore Agency Platform", role:"All", skill:"All", date: 'Tuesday', time: '8:00 am - 9:00 am', location:'Room 101', 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:'Joyce Sigler'},
{ track:"AMS360", name:"Words matter: Learn the Latest on eDocs, Text Setups and eForms",
role:"Administrators", skill:"Intermediate", date: 'Tuesday', 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:"Sagitta", name:"The Ins and Outs of Data Entry - Commercial", role:"All - Commercial", skill:"Int/Adv", date:'Wednesday', 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:'Wednesday', 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:"Accelerate information, decision-making, and agent-carrier connections with ReferenceConnect", role:"All", skill:"All",
date:'Tuesday', time: '8:00 am - 9:00 am', location:'Room 101', description:"Please join Vertafore partnered with Nationwide to look at one of the top priorities agents look for when working with a carrier, ease of doing business via a streamlined submission process. With ReferenceConnect's WebPublishing feature paired with a new appetite engine, carriers can easily share proprietary and necessary information with both internal employees and agencies alike, eliminating costly back and forth communication and reducing potential errors. Join us and learn how you can become a champion with your underwriters and a carrier of choice with your agents.", instructors:'Joyce Sigler'}
];
vm.filterItems = function filterItems(val) {
vm.filterValue = val;
}
}).filter('uniqueVal', function() {
return function(data, val) {
var propsData = data.map(function(item) {
return item[val];
});
var uniqueData = _.uniq(propsData);
return uniqueData;
}
});
html,body {
margin: 0;
padding: 20px;
}
ul,li {
padding: 0;
margin: 0;
list-style: none;
}
.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 {
margin-right: 10px;
}
.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;*/
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<h1>Accelerate Education Sessions</h1>
<div ng-app="myApp" ng-controller="FilterCtrl as vm">
<div class="filter-options">
<div class="filter-option">
<label>Track</label>
<select ng-model="track" ng-change='vm.filterItems(track)' ng-options="track for track in vm.filterData | uniqueVal: 'track'">
<option value="">All Tracks</option>
</select>
<label>Day</label>
<select ng-model="date" ng-change='vm.filterItems(date)' ng-options="date for date in vm.filterData | uniqueVal: 'date'">
<option value="">All Days</option>
</select>
<label>Role</label>
<select ng-model="role" ng-change='vm.filterItems(role)' ng-options="role for role in vm.filterData | uniqueVal: 'role'">
<option value="">All Roles</option>
</select>
</div>
</div>
<div class="filter-form">
<ul class="filter-items" ng-repeat="item in vm.filterData | filter:vm.filterValue">
<li class="filter-item ed-session"><h4 class="session-title">{{ item.name }}</h4>
<div class="specifics"> <b class="track-system">{{item.track }}</b><br/>
Role: <b>{{item.role }}</b> | Skill Level: <b>{{item.skill }}</b><br/>
{{item.date }} | {{item.time }}</b> | {{item.location }}</div>
<p class="desc"><span class="small-text">Description </span> {{item.description}} — Instructor(s): <em>{{item.instructors}}</em></p></li>
</ul>
</div>
</div>