在Angular js中链接3个过滤器

Question

I'm trying to chain three components of my filter in Angular js: track, days, and role. I want to make sure that if I select something in dropdown one and then select another option in dropdown two, it only filters content from the results of the first dropdown.

Right now, each filter acts independently... 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> 

Answer 1

I don't know if this exactly the behavior you want on the dropdown, I believe the first drop down should not changing the list, anyway as long I able to help you here's what I did.

I inject $filter so it used to filter the data of the result set. I amend also the result table to <ul class="filter-items" ng-repeat="item in vm.filteredData"> I removed the filter :vm.filterValue because it useless because we used $filter

I changed your ng-option like this: "role for role in vm.filterData | filter: vm.filterValue | uniqueVal: 'role'"

I hope it will helps you.

to learn more about filter: https://www.w3schools.com/angular/angular_filters.asp

You can do something like this:

 var app = angular.module('myApp', []); app.controller('FilterCtrl',['$filter', function($filter) { var vm = this; vm.filterValue = ""; vm.filteredData = ""; 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'} ]; var ddTrack = null; var ddDate= null; var ddRole = null; vm.filteredData = vm.filterData; //passing the data so filterData will not be affected vm.filterItems = function filterItems(val,dropdown) { switch (dropdown) { case 'track': ddTrack = val; break; case 'date': ddDate = val; break; case 'role': ddRole = val; break; default: } if(val != null) { vm.filterValue = val; vm.filteredData = $filter('filter')(vm.filteredData,val); } else { if(ddTrack === null && ddDate === null && ddRole === null) { vm.filteredData = vm.filterData; //this will reset all } } } }]).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,"track")' ng-options="track for track in vm.filteredData | filter: vm.filterValue | uniqueVal: 'track'"> <option value="">All Tracks</option> </select> <label>Day</label> <select ng-model="date" ng-change='vm.filterItems(date,"date")' ng-options="date for date in vm.filteredData | filter: vm.filterValue | uniqueVal: 'date'"> <option value="">All Days</option> </select> <label>Role</label> <select ng-model="role" ng-change='vm.filterItems(role,"role")' ng-options="role for role in vm.filteredData | filter: vm.filterValue | uniqueVal: 'role'"> <option value="">All Roles</option> </select> </div> </div> <div class="filter-form"> <ul class="filter-items" ng-repeat="item in vm.filteredData"> <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>