我正在尝试在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>
答案 0 :(得分：0)
我不知道这是否完全符合您对下拉菜单的要求，我相信第一个下拉菜单不应更改列表，只要我能帮助您，这就是我所做的。
我注入了$filter，所以它用来过滤结果集的数据。我还将结果表修改为<ul class="filter-items" ng-repeat="item in vm.filteredData">，我删除了filter :vm.filterValue，因为它没有用，因为我们使用了$filter
我这样更改了您的ng选项："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>