![](/img/trans.png)
[英]AngularJS Ng-Repeat - Multiple Custom Filters to Filter Items by JSON Object Properties
[英]Multiple filters on a json object?
我為單個json對象設置了10個過濾器:
var filtro1 = function(value, selecionado){
var data = JSON.parse(JSON.stringify(json.aPesquisa));
var result = data.filter(function(pesquisa){
...
});
return result;
}
var filtro2 = function(value, selecionado){
var data = JSON.parse(JSON.stringify(json.aPesquisa));
var result = data.filter(function(pesquisa){
...
});
return result;
}
var filtro3 = function(horamin, horamax){
var data = JSON.parse(JSON.stringify(json.aPesquisa));
var result = data.filter(function(pesquisa){
...
});
return result;
}
var filtro4 = function(value, selecionado){
var data = JSON.parse(JSON.stringify(json.aPesquisa));
var result = data.filter(function(pesquisa){
...
});
return result;
}
...
等等。 如您所見,每個過濾器都是分開工作的,即如果我先用filtro1過濾,然后再用filtro2過濾,則只顯示filtro2。
有什么辦法可以使這些過濾器在一起?
我考慮過使用帶有選定過濾器的數組:
var filtros = ["filtro1, "filtro2", "filtro6", "filtro9", "filtro10"];
但是我不能。
一個想法,並鏈接過濾器。
更多信息:
測試JSON:
{
"aPesquisa":[
{
"trecho":[
{
"info":[
{
"cor":{
"nm":"Laranja"
},
"dtPartida":"20170620 11:20",
"dtChegada":"20170620 16:40",
"hrDuracao":"03:20",
"vTarifa":{
"tarifa":{
"vlTotal":1969.17
}
}
}
]
},
{
"info":[
{
"cor":{
"nm":"Vermelho"
},
"dtPartida":"20170620 11:20",
"dtChegada":"20170620 16:40",
"hrDuracao":"03:25",
"vTarifa":{
"tarifa":{
"vlTotal":769.90
}
}
},
{
"cor":{
"nm":"Vermelho"
},
"dtPartida":"20170620 11:20",
"dtChegada":"20170620 16:40",
"hrDuracao":"03:30",
"vTarifa":{
"tarifa":{
"vlTotal":2969.20
}
}
},
{
"info":[
{
"cor":{
"nm":"Azul"
},
"dtPartida":"20170620 11:20",
"dtChegada":"20170620 16:40",
"hrDuracao":"03:20",
"vTarifa":{
"tarifa":{
"vlTotal":669.17
}
}
}
]
}
]
}
]
}
]
}
我的10個過濾器中的兩個:
//DURATION FILTER
var filtroDuracao = function(horamin, horamax)
{
var data = JSON.parse(JSON.stringify(json.aPesquisa));
var result = data.filter(function(item){
var voos = item.trecho[0].info.filter(function(info){
var time = horasParaMinutos(info.hrDuracao);
return time >= horamin && time <= horamax;
});
item.trecho[0].voo = voos;
return voos.length > 0;
});
return result;
};
// COLOR FILTER
var cores = [];
var filtroCor = function(value, selecionado){
var sgv = value.split('|')[0];
if (selecionado) {
Array.prototype.push.apply(cias, json.aPesquisa.filter(function(pesquisa){
var nm = pesquisa.trecho[0].info[0].cor.nm;
return nm == sgv;
}));
} else {
cias = cores.filter(function(pesquisa) {
var nm = pesquisa.trecho[0].info[0].cor.nm;
return nm != sgv;
});
}
return cores;
}
在filtroDuracao
我花了幾分鍾從滑道游騎兵那里得到了Horamin和Horamax。
並在filtroCor
我傳遞的值value
復選框,它是否被選中或不selected
,以濾除多種顏色。
顏色復選框代碼(JavaScript):
$(".filtros input[name='cores']").on('change', function(event) {
var value = $(this).val();
filtroCor(value, this.checked);
});
幻燈片游俠代碼(JavaScript):
$("#duracao-range").slider({
range: true,
min: 0,
max: 1440, //1440 / 60 = 24
step: 15,
values: [0, 1439],
slide: function(event, ui) {
//Mínimo
//calcula as horas, exemplo: 125 / 60 = 2,083, arredonda para 2
var hoursMin = Math.floor(ui.values[0] / 60);
//calcula os minutos, exemplo: 125 - 2 * 60 = 5
//No final terá horas = 2 e minutos = 5
var minutesMin = ui.values[0] - (hoursMin * 60); //restante são os minutos
//acrescenta o zero a esquerda se houver apenas 1 digito, 1 = 01, 2 = 02 e etc...
if (hoursMin.toString().length == 1) hoursMin = '0' + hoursMin;
if (minutesMin.toString().length == 1) minutesMin = '0' + minutesMin;
$(".min-duracao-label").html(hoursMin + ':' + minutesMin);
//Máximo
var hoursMax = Math.floor(ui.values[1] / 60);
var minutesMax = ui.values[1] - (hoursMax * 60);
if (hoursMax.toString().length == 1) hoursMax = '0' + hoursMax;
if (minutesMax.toString().length == 1) minutesMax = '0' + minutesMax;
$(".max-duracao-label").html(hoursMax + ':' + minutesMax);
var horaminida= horasParaMinutos(hoursMin + ':' + minutesMin));
var horamaxida= horasParaMinutos(hoursMax + ':' + minutesMax));
filtroDuracao(horaminida, horamaxida);
}
});
horasParaMinutos
函數將小時轉換為分鍾:
var horasParaMinutos = function (str) {
var horas = str.split(':').map(Number);
return horas[0] * 60 + horas[1];
}
我的疑問之一和以下幾點:
我有一個持續時間復選框列表,其中選中了3個,然后選擇了一個顏色復選框。 如何獲取持續時間和顏色復選框以進行過濾?
您可以將filter函數與數組中的綁定參數一起使用,並應用reduce。
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], filter1 = function(left, right, item) { return item >= left && item <= right; }, filter2 = function(value, item) { return !(item % value); }, filters = [filter1.bind(null, 1, 10), filter2.bind(null, 3)], result = filters.reduce((a, fn) => a.filter(fn), array); console.log(result);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.