如何用最小值和最大值过滤 AngularJS 中的数据？答案

【问题标题】：How to filter data in AngularJS with a min and max?如何用最小值和最大值过滤 AngularJS 中的数据？
【发布时间】：2015-10-17 19:15:35
【问题描述】：

我有以下数据：

$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": ""
}];

【问题讨论】：

如果日期属性是日期而不是字符串，则可以简化。您可以使用下划线之类的库，并使用函数 _.filter 通过一些条件逻辑来实现您想要的功能，以添加缺失月份的数据。
@Anand 这些问题都不需要额外的库，而且都很简单
如果需要，我可以获取不同格式的日期。我正在寻找逻辑。
如果我理解正确的话，如果该时期没有数据，您想要创建额外的无名事件？
是的。您不需要任何库。可以使用本机代码完成。

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

【解决方案1】：

以下应该可以帮助您开始.. 变量更改为非范围变量以进行简单的 js 测试

var dateRange = {
    "start": "2015-04-01",
    "end": "2015-07-01"
};

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

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

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

DEMO

【讨论】：

【解决方案2】：

使用下划线。如果日期范围超出，还添加逻辑添加具有空白名称的缺失值

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

【讨论】：

在这种情况下，与仅使用本机代码相比，库代码更长且涉及更多。附加值在哪里？
当您在这个问题的上下文中看到它时，您可能是对的。根据我的经验，当我建立一个新的 Angular js 项目时，我将使用低破折号或下划线来进行简单的过滤、排序和投影。所以是的，你是对的，如果你只专注于这个问题，你不需要任何其他库。您可以使用本机代码来完成。

【解决方案3】：

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

代码如下：

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

【讨论】：