Question

您好我希望提供一个datepicker（材料工具包UI），当我返回页面上的快照图像列表时，它会过滤返回的快照的日期。但是我得到一个喷油器错误： angular.js：13920错误：[$ injector：unpr]未知提供者：dayFilterFilterProvider＆lt; - dayFilterFilter http://errors.angularjs.org/1.5.8/ $注射器/ unpr？P0 = dayFilterFilterProvider％20％3C-NaNayFilterFilter

这是指令：

(function () {
    "use strict";
    app.controller("MainController", [
        "$rootScope",
        "$scope",
        function ($rootScope, $scope) {
            $scope.dayFilter = null;
            $scope.dayFilter = function(items, date) {
                return function(items, date) {
                    $rootScope.dateFilter = date;
                    var filtered = [];
                    var begin, end
                    begin = date.setHours(0, 0, 0);
                    end = date.setHours(23, 59, 59);
                    angular.forEach(items, function(item) {
                        if (item > begin && item < end) {
                            filtered.push(item)
                        }
                    })
                    console.log("Filtered day", date)
                    return filtered
                }
            };
                $scope.dayFilter(new Date(), 'date');

这是html：

<div class="dropdown">
        <h3 class="dropdown-toggle" id="day-datetimepicker" role="button" data-toggle="dropdown" data-target="#"> {{ filtered.date ? filtered.date.label : 'Day' }} <span class="caret"></span></h3>
        <ul class="dropdown-menu" role="menu" aria-labelledby="day-datetimepicker">
            <datetimepicker data-ng-model="dateFilter" data-datetimepicker-config="{
                dropdownSelector: '#day-datetimepicker',
                minView: 'day',
                startView: 'day'
            }" data-on-set-time="dayFilter(newDate, 'day')"></datetimepicker>
        </ul>
    </div>

    <a ng-repeat="s in chui.snapshot | dayFilter:'day' | orderBy:'-date'"

        ng-click="select('snapshot', s);
            modal('snapshot-keyholder', true);"
        class="snapshot-thumbnail col-xs-6 col-sm-4 col-md-3 col-lg-2"
    >

如果您有任何其他问题，请与我们联系。非常感谢提前

在回答第一个答案时，我创建了这个模块：

 app.filter("dayFilter",[
        function () {
            return function dayFilter(items,date) {
                var d = new Date();
                var filteredItems = [];
                var begin, end
                begin = d.setHours(0, 0, 0);
                end = d.setHours(23, 59, 59);
                angular.forEach(items, function(item) {
                    if (item > begin && item < end) {
                        filtered.push(item);
                    }
                })
                console.log("Filtered day", d);
                return filteredItems
            }
            $filter("dayFilter");
            // dayFilter(new Date(),'date');
        }]);


I no longer get an error, but the snapshots do not appear in the output, even though I get the following in the console:
iltered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)

Answer 1

模板在dayFilter指令中使用ng-repeat。要向模块添加过滤器，请使用module.filter方法：

app.filter("dayFilter", () => {
   return function dayFilter(items, date) {
       //filter code
       return filteredItems;
   };
});

要在控制器中实例化过滤器，请使用$filter服务：

$filter("dayFilter");

有关详细信息，请参阅AngularJS Developer Guide -- Creating Custom FIlters

AngularJS datepicker返回快照

1 个答案: