在Angular js中鏈接3個過濾器

Question

我試圖在Angular js中鏈接過濾器的三個組件：跟蹤，天數和角色。 我想確保，如果我在下拉菜單一中選擇了某個選項，然后在下拉菜單二中選擇了另一個選項，則它只會從第一個下拉菜單的結果中過濾內容。

現在，每個濾波器獨立行事...... 嘆

 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

我不知道您的下拉菜單是否正是您想要的行為，我相信第一個下拉列表不應更改列表，只要我能幫助您，這就是我所做的。

我注入了$filter所以它用來過濾結果集的數據。 我還將結果表修改<ul class="filter-items" ng-repeat="item in vm.filteredData">我刪除了filter :vm.filterValue因為它沒有用，因為我們使用了$filter

我這樣更改了ng-option： "role for role in vm.filterData | filter: vm.filterValue | uniqueVal: 'role'"

希望對您有幫助。

要了解有關過濾器的更多信息，請訪問： https : //www.w3schools.com/angular/angular_filters.asp

您可以執行以下操作：

 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>