- 首页
- 前端开发
- 如何在Angular 2中过滤带有多个复选框的范围滑块的结果?
如何在Angular 2中过滤带有多个复选框的范围滑块的结果?
[英] How to filter results for range slider with multiple checkbox together in Angular 2?
本文介绍了如何在Angular 2中过滤带有多个复选框的范围滑块的结果?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试过滤给定数组db"的结果，共有三个过滤器:价格、持续时间和类别.
我尝试使用 filter() 方法来过滤结果.
这是我尝试过的代码链接:https://stackblitz.com/edit/multiple-filters?file=app%2Fapp.component.ts
component.html
<div id="价格"><h3>价格:{{rangeValues[0] + ' - ' + rangeValues[1]}}<p-slider [(ngModel)]="rangeValues" (click)="handleChange()" [min]="0"[max]="2000" [style]="{'width':'14em'}" [range]="true"></p-slider>
<小时><div id="持续时间"><h3>持续时间</h3><li><input type="checkbox" (click)="checkFilter('2 days')">2 天<li><input type="checkbox" (click)="checkFilter('6 days')">6 Days</li>
<小时><div id="主题"><h3>主题</h3><li><input type="checkbox" id="Wild Life" (click)="filterTheme('Wild Life')">Wild Life</li><li><input type="checkbox" id="Romance" (click)="filterTheme('Romance')">Romance</li><li><input type="checkbox" id="Food & Drink" (click)="filterTheme('Food & Drink')">Food &喝<li><input type="checkbox" id="Adventure" (click)="filterTheme('Adventure')">Adventure
<小时>
<div class="结果"><h3>结果</h3><div *ngFor="let p of package"><p>{{p.product_name}}</p>
component.ts
@Component({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit {数据库=[{"id":"1","product_name":"卡纳塔克邦 6 天",价格":324，"duration":"6 天",类别":[浪漫"]},{"id":"5","product_name":"泰国两天",价格":234，"持续时间":"2 天",类别":[浪漫"，野生生活"]},{"id":"8","product_name":"德里两天",价格":1400，"持续时间":"2 天","category": ["Romance","Food & Drink","Adventure"],}];rangeValues: number[] = [0,2000];包:任何；过滤数据=[];ngOnInit(){this.packageList();}包列表(){for(let i = 0; i < this.db.length; i++){this.filterData.push(this.db[i]);this.package = this.filterData;}}句柄变化(){for(let i = 0; i < this.filterData.length; i++){this.package= this.filterData.filter(item => item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);}}检查过滤器(ID){if(id.checked==true){for(let i = 0; i < this.filterData.length; i++){this.filterData= this.filterData.filter(item => item.duration !== id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);this.package=this.filterData;}}别的 {for(let i = 0; i < this.filterData.length; i++){this.filterData= this.filterData.filter(item => item.duration == id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);this.package=this.filterData;}}}过滤器主题(ID){让 b=(document.getElementById(id));if(b.checked==true){for(let i = 0; i < this.filterData.length; i++){for(let j=0;j item.category[j]==id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);}}}}别的 {for(let i = 0; i < this.filterData.length; i++){for(let j=0;j item.category[j]!== id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);}}}}}}
我想要达到的目标:
价格过滤器: 我使用范围滑块过滤结果，它可以正确过滤价格，但它也应该过滤选定持续时间和类别的结果.
持续时间过滤器:使用复选框过滤结果，这应该过滤给定价格和选定类别的结果.
类别过滤器:一个 product_name 可以有一个或多个类别，它应该过滤所选类别和所选价格的结果.
立>
解决方案
好吧，您通过循环并检查它使事情复杂化，您可以拥有一个可以为您完成工作的函数.
第一步:取 3 个模型
rangeValues: number[] = [0, 2000];持续时间:任何= [];主题:任何= [];
step2:在这些模型中分配用户的值
handleChange() {this.ApplyFilters();}检查过滤器(ID){如果 (this.durations.some(a => a === id)) {this.durations = this.durations.filter(a => a !== id)} 别的 {this.durations.push(id)}this.ApplyFilters();}过滤器主题(ID){如果 (this.themes.some(a => a === id)) {this.themes = this.themes.filter(a => a !== id)} 别的 {this.themes.push(id)}this.ApplyFilters();}
step3:创建一个通用过滤器
ApplyFilters() {this.package = this.filterData.filter(item => {return (item.price >= this.rangeValues[0] && item.price <= this.rangeValues[1]) &&(this.durations.some(b => b === item.duration) || this.durations.length === 0) &&(item.category.every(c => this.themes.some(d => d === c)) || this.themes.length === 0)});}
大功告成
这是演示
I am trying to filter results for the given array "db", there are three filters:
price, duration, and category.
I tried using filter() method to filter results.
Here is the link of code which i have tried: https://stackblitz.com/edit/multiple-filters?file=app%2Fapp.component.ts
component.html
<div class="filters">
<div id="price">
<h3>Price: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3>
<p-slider [(ngModel)]="rangeValues" (click)="handleChange()" [min]="0"
[max]="2000" [style]="{'width':'14em'}" [range]="true"></p-slider>
</div>
<hr>
<div id="duration">
<h3>Duration</h3>
<li><input type="checkbox" (click)="checkFilter('2 days')"> 2 Days</li>
<li><input type="checkbox" (click)="checkFilter('6 days')">6 Days</li>
</div>
<hr>
<div id="Theme">
<h3>Theme</h3>
<li><input type="checkbox" id="Wild Life" (click)="filterTheme('Wild Life')">Wild Life</li>
<li><input type="checkbox" id="Romance" (click)="filterTheme('Romance')">Romance</li>
<li><input type="checkbox" id="Food & Drink" (click)="filterTheme('Food & Drink')">Food & Drink</li>
<li><input type="checkbox" id="Adventure" (click)="filterTheme('Adventure')">Adventure</li>
</div>
<hr>
</div>
<div class="results">
<h3>Results</h3>
<div *ngFor="let p of package">
<p>{{p.product_name}}</p>
</div>
</div>
component.ts
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
db=[
{
"id":"1",
"product_name":"6 Days at Karnataka",
"price":324,
"duration":"6 days",
"category":["Romance"]
},
{
"id":"5",
"product_name":"2 Days at Thailand",
"price":234,
"duration":"2 days",
"category":["Romance","Wild Life"]
},
{
"id":"8",
"product_name":"2 Days at Delhi",
"price":1400,
"duration":"2 days",
"category": ["Romance","Food & Drink","Adventure"],
}
];
rangeValues: number[] = [0,2000];
package:any;
filterData=[];
ngOnInit(){
this.packageList();
}
packageList(){
for(let i = 0; i < this.db.length; i++){
this.filterData.push(this.db[i]);
this.package =this.filterData;
}
}
handleChange() {
for(let i = 0; i < this.filterData.length; i++){
this.package= this.filterData.filter(item => item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
}
}
checkFilter(id){
if(id.checked==true){
for(let i = 0; i < this.filterData.length; i++){
this.filterData= this.filterData.filter(item => item.duration !== id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
this.package=this.filterData;
}
}
else {
for(let i = 0; i < this.filterData.length; i++){
this.filterData= this.filterData.filter(item => item.duration == id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
this.package=this.filterData;
}
}
}
filterTheme(id){
let b=(<HTMLInputElement>document.getElementById(id));
if(b.checked==true){
for(let i = 0; i < this.filterData.length; i++){
for(let j=0;j< this.filterData[i].category.length; j++){
if(this.filterData[i].category[j]==id && this.filterData[i].price >=this.rangeValues[0] && this.filterData[i].price <=this.rangeValues[1]){
this.package= this.filterData.filter(item => item.category[j]==id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
}
}
}
}else {
for(let i = 0; i < this.filterData.length; i++){
for(let j=0;j<this.filterData[i].category.length; j++){
if(this.filterData[i].category[j]!==id && this.filterData[i].price >=this.rangeValues[0] && this.filterData[i].price <=this.rangeValues[1]){
this.package = this.filterData.filter(item => item.category[j]!== id && item.price >=this.rangeValues[0] && item.price <=this.rangeValues[1]);
}
}
}
}
}
}
What I want to achieve:
price filter: which I have used the range slider to filter results and it filters price correctly but it should also filter results for selected duration and category.
Duration filter: used the checkbox to filter results, this should filter results for the given price and selected category.
Category filter: one product_name can have one or more category and it should filter results for the selected one and price chosen.
解决方案
Well, you are complicating the things by looping over it and checking it you can have one function that would do the work for you.
step1: Take 3 models
rangeValues: number[] = [0, 2000];
durations: any = [];
themes: any = [];
step2: assign the values of the user in these models
handleChange() {
this.ApplyFilters();
}
checkFilter(id) {
if (this.durations.some(a => a === id)) {
this.durations = this.durations.filter(a => a !== id)
} else {
this.durations.push(id)
}
this.ApplyFilters();
}
filterTheme(id) {
if (this.themes.some(a => a === id)) {
this.themes = this.themes.filter(a => a !== id)
} else {
this.themes.push(id)
}
this.ApplyFilters();
}
step3: Create one common filter
ApplyFilters() {
this.package = this.filterData.filter(item => {
return (item.price >= this.rangeValues[0] && item.price <= this.rangeValues[1]) && (this.durations.some(b => b === item.duration) || this.durations.length === 0) && (item.category.every(c => this.themes.some(d => d === c)) || this.themes.length === 0)
});
}
And your are done
Here is the demo
这篇关于如何在Angular 2中过滤带有多个复选框的范围滑块的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
