用于比较 angularjs 中日期的自定义过滤器答案

【问题标题】：Custom filter for comparing dates in angularjs用于比较 angularjs 中日期的自定义过滤器
【发布时间】：2017-09-03 14:23:54
【问题描述】：

我只想显示列表中输入字段中两个选定日期之间的项目。这是我的自定义控制器：

// Custom filter for comparing dates
snippet.filter('snippetsByDate', function(){
    return function(items, fromDate, toDate){
        var filtered = [];
        //here you will have your desired input
        var from_date = Date.parse(fromDate);
        var to_date = Date.parse(toDate);
        alert("From dateeeee " + from_date);
        angular.forEach(items, function(item) {
            if(Date.parse(item.created) >= from_date && Date.parse(item.created) <= to_date) {
                filtered.push(item);
            }
        });
        return filtered;
    };
});

过滤器函数中的 alert() 为变量 fromDate 返回 undefined，为变量 from_date 返回 NaN。这就是我如何称呼我的过滤器：

<tr ng-repeat="s in snippets | filter:description | snippetsByDate : from_date : to_date">
                <td>{{s.description}}</td>
                <td>{{s.language}}</td>
                <td>{{s.url}}</td>
                <td>{{s.user}}</td>
</tr>

我的输入字段在此代码下方（不知道是否会出现这种情况），如下所示：

<label>Filter snippets by date</label><br>
<label>From: </label>
<input type="date" ng-model="from_date"><br>
<label>To: </label>
<input type="date" ng-model="to_date">

当我从 ng-repeat 中删除自定义过滤器时，它工作正常，但看起来我得到的是空列表。

我应该提到，在我的班级中，我有一个变量创建为 java.util.Date 类。

提前谢谢你。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

请检查此工作代码。

var snippet = angular.module('plunker', []);
    snippet.filter('snippetsByDate', function () {
        return function (items, fromDate, toDate) {
            var filtered = [];
            //here you will have your desired input
            var from_date = Date.parse(fromDate);
            var to_date = Date.parse(toDate);
            if (from_date == null || toDate == null)
                filtered = items;
            else
                filtered = items.filter(function (item) {
                    return item.created >= from_date && item.created <= to_date;
                });
            return filtered;
        };
    });
    snippet.controller('MainCtrl', function ($scope) {
        $scope.snippets = [];
        for (var i = 0; i < 11; i++) {
            $scope.snippets.push({
                description: 'description-' + i,
                language: i % 2 == 0 ? 'Hindi' : 'English',
                url: 'url-' + i,
                user: 'User-' + i,
                created: new Date().setMonth(i)
            });
        }

    });

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js" ></script>
   <div ng-app="plunker" ng-controller="MainCtrl">
        <table>
            <tr>
                <td>
                    <label>Filter snippets by date</label><br>
                    <label>From: </label>
                    <input type="date" ng-model="from_date"><br>
                    <label>To: </label>
                    <input type="date" ng-model="to_date">
                </td>
            </tr>
            <tr ng-repeat="s in snippets | filter:description | snippetsByDate : from_date : to_date">
                <td>{{s.description}}</td>
                <td>{{s.language}}</td>
                <td>{{s.url}}</td>
                <td>{{s.user}}</td>
            </tr>
        </table>
    </div>

【讨论】：