如何使用min和max过滤AngularJS中的数据?

时间:2015-07-27 14:28:05

标签: angularjs scope angularjs-scope angularjs-ng-repeat angular-filters

我有以下数据:

$scope.events = [{
    "date": "2015-01-01",
    "name": "party"
}, {
    "date": "2015-02-01",
    "name": "birthday"
}, {
    "date": "2015-03-01",
    "name": "graduation"
}, {
    "date": "2015-04-01",
    "name": "wedding"
}];

用户可以选择日期范围,例如:

$scope.dateRange = [
    "start": "2015-01-01",
    "end": "2015-03-01"
];

在这种情况下,我只想显示用户选择的日期之间的数据,例如:

 $scope.selectedEvents = [{
    "date": "2015-01-01",
    "name": "party"
}, {
    "date": "2015-02-01",
    "name": "birthday"
}, {
    "date": "2015-03-01",
    "name": "graduation"
}];

在这种情况下,用户选择了包含数据的日期范围,但如果用户选择的日期范围超出了可用数据,例如:

$scope.dateRange = [
    "start": "2014-12-01",
    "end": "2015-08-01"
];

然后我想返回以下内容:

$scope.events = [{
    "date": "2014-12-01",
    "name": ""
}, {
    "date": "2015-01-01",
    "name": "party"
}, {
    "date": "2015-02-01",
    "name": "birthday"
}, {
    "date": "2015-03-01",
    "name": "graduation"
}, {
    "date": "2015-04-01",
    "name": "wedding"
}, {
    "date": "2015-05-01",
    "name": ""
}, {
    "date": "2015-06-01",
    "name": ""
}, {
    "date": "2015-07-01",
    "name": ""
}, {
    "date": "2015-08-01",
    "name": ""
}];

3 个答案:

答案 0 :(得分:3)

以下应该让你开始..变量改为非范围的变量用于简单的js测试

layout.setOrientation(LinearLayout.HORIZONTAL);

如果要推断日期,请按日期对defualt数据进行排序,并检查第一个和最后一个值。然后创建一个循环以在过滤之前将其他项目推送到主数组

DEMO

答案 1 :(得分:0)

使用下划线。如果日期范围超过添加空白名称的缺失值

,也要添加逻辑
var events = [{
    "date": new Date("2015-01-01"),
    "name": "party"
}, {
    "date": new Date("2015-02-01"),
    "name": "birthday"
}, {
    "date": new Date("2015-03-01"),
    "name": "graduation"
}, {
    "date": new Date("2015-04-01"),
    "name": "wedding"
}];

//console.log(events);

var startDate = new Date("2015-01-01");
var endDate = new Date("2015-03-01");

var filteredDate = _.chain(events)
                        .filter(function(event){return event.date.getTime() >= startDate.getTime();})
                        .filter(function(event){return event.date.getTime() <= endDate.getTime();})
                        .value();


console.log(filteredDate);

JSFIDDLE

答案 2 :(得分:0)

我更新了fiddle this的答案,添加了当您的范围超出可用数据时添加空事件所需的代码。

以下是代码:

var events=[{
    "date": "2015-01-01",
    "name": "party"
}, {
    "date": "2015-02-01",
    "name": "birthday"
}, {
    "date": "2015-03-01",
    "name": "graduation"
}, {
    "date": "2015-04-01",
    "name": "wedding"
}];

var dateRange = {
    "start": "2014-11-01",
    "end": "2016-01-01"
};

var startDate = new Date(dateRange.start),
    endDate = new Date(dateRange.end);

var eventsOfRange = [];
var curDate = new Date(startDate);
while(curDate <= endDate) {
    // we'll add the correct name for the dates that have an event later
    eventsOfRange.push({
        date: curDate.toISOString().substring(0, 10),
        name: ""
    });
    curDate.setUTCMonth(curDate.getUTCMonth()+1);
}


var filteredEvents = events.filter(function(item){
    var date = new Date(item.date);
    return date >= startDate && date <= endDate;
});

function find(eventsArray, date) {
    return eventsArray.reduce(function(indexFound, curEvent, index) {
        if(date === curEvent.date && indexFound === -1) {            
             return index;   
        }
        return indexFound;
    }, -1);
}

filteredEvents.forEach(function(event) {
    var index = find(eventsOfRange, event.date);
    eventsOfRange[index].name = event.name;
});

document.getElementById('pre').innerHTML = JSON.stringify(eventsOfRange, null, ' ')

JSFiddle