过滤日期范围angularjs时出错

时间:2016-04-26 17:52:54

标签: javascript angularjs

我正在尝试根据日期范围过滤数据。 我使用moment.js来解析日期。

我收到以下错误:  未知提供者:dateFilterFilterProvider< -

angular.js:11655错误:[$ injector:unpr] http://errors.angularjs.org/1.3.15/ $ injector / unpr?p0 = dateFilterFilterProvider%20%3C-NaNateFilterFilter

CSHTML:

         <div class="row" ng-controller="EVerifyController as ECtrl">
  <div class="tab-pane" id="completed">
                            <!--Completed TAB-->

                                <p></p>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-search"></i></div>
                                        <input type="text" class="form-control" placeholder="Employee Name" ng-model="search.name">
                                    </div>
                                    <p></p>
                                    <div class="input-group">

                                       <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-search"></i>
                                            </div>
                                            <input type="text" class="form-control" id="txtPreCurrentdate" data-provide="datepicker" placeholder="Enter a Start Date" ng-model="dateFrom" />
                                            <span class="input-group-addon">-</span>
                                            <input type="text" class="form-control" id="txtPostCurrentdate" data-provide="datepicker" placeholder="Enter an End Date"  ng-model="dateTo"/>

                                               <div class="input-group-addon">
                                                   <i class="fa fa-server"></i>
                                               </div>
                                               <input type="number" id="txtResltsPerPage" class="form-control" ng-model="pageSize" placeholder="Results per Page 10">

                                           </div>

                                    </div>


                                </div>


                            <table class="table table-bordered table-striped">

                                <thead>
                                    <tr>
                                        <th ng-click="sortdata('name')"> Employee Name
                                            <span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>   
                                        </th>
                                        <th ng-click="sortdata('responseDate')">Response Date
                                            <span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                        </th>
                                        <th ng-click="sortdata('authStatus')">Authorized
                                            <span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                        </th>
                                        <th ng-click="sortdata('caseSatus')">Case Status
                                            <span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                        </th>
                                        <th ng-click="sortdata('phone')">Phone Number
                                            <span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                        </th>

                                    </tr>
                                </thead>

                                <tbody>

                                    <tr dir-paginate="emp in EmployeeInfo | orderBy:sortType:sortReverse | filter:search.name  |  filter: dateRangeFilter('responseDate', dateFrom, dateTo) | itemsPerPage: 2">

                                        <td>{{emp.name}}</td>
                                        <td>{{emp.responseDate | dateFilter | date:"dd-MM-yyyy"}}</td>
                                        <td>{{emp.authStatus}}</td>
                                        <td>{{emp.caseSatus}}</td>
                                        <td>{{emp.phone}}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <div ng-controller="OtherController" class="other-controller">                           
                                <div class="text-center">
                                    <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-pagination-controls>
                                </div>
                            </div>                           
                        </div> 


                             

js文件:

var EVerifyModule = angular.module('EVerifyModule', ['angularFileUpload', 'ui.bootstrap', 'angularUtils.directives.dirPagination']);

EVerifyModule.controller('EVerifyController', ['$scope', '$http', '$compile', function ($scope, $http, $compile) {

                           var EmployeeInfo = [ {
                            "name": "Daniel Cho",
                            "hireDate": "03/11/2016",
                            "responseDate": "03/01/2016",
                            "submitDate": "03/12/2016",
                            "authStatus": "Authorized",
                            "caseSatus": "Closed",
                            "phone": "+1 (213) 382-1115",
                            "authorized": true
                        },
                        {
                            "name": "Angie Shen",
                            "hireDate": "03/15/2016",
                            "responseDate": "03/2/2016",
                            "submitDate": "03/12/2016",
                            "authStatus": "Not-Authorized",
                            "caseSatus": "Open",
                            "phone": "+1 (213) 382-1115",
                            "authorized": false
                        },
                        {
                            "name": "Ritesh Khotharti",
                            "hireDate": "04/01/2016",
                            "responseDate": "03/3/2016",
                            "submitDate": "03/12/2016",
                            "authStatus": "Authorized",
                            "caseSatus": "Closed",
                            "phone": "+1 (213) 382-1115",
                            "authorized": true
                        },
                        {
                            "name": "David Song",
                            "hireDate": "01/01/2016",
                            "responseDate": "03/10/2016",
                            "submitDate": "03/12/2016",
                            "authStatus": "Authorized",
                            "caseSatus": "Closed",
                            "phone": "+1 (213) 382-1115",
                            "authorized": true
                        }
    ];

                           $scope.EmployeeInfo = EmployeeInfo;

                            angular.element(document).ready(function () {
                                initConfigurationClosedCases();
                                showOptionsMenu('J', 'Jobs', 'glyphicon glyphicon-th-list');
                            });

                            function initConfigurationClosedCases() {
                                sessionStorage.ModuleSelected = 'Closed Cases';
                                LoadMenuInformation();
                            }

                            $scope.sortdata = function (keyname) {
                                $scope.sortKey = keyname;   //set the sortKey to the param passed
                                $scope.reverse = !$scope.reverse; //if true make it false and vice versa
                            }

                            $scope.dateRangeFilter = function (property, startDate, endDate) {
                                return function (item) {
                                    if (item[property] === null) return false;

                                    var itemDate = moment(item[property]);
                                    var s = moment(startDate, "DD-MM-YYYY");
                                    var e = moment(endDate, "DD-MM-YYYY");

                                    if (itemDate >= s && itemDate <= e) return true;
                                    return false;
                                }
                            }
}]);

1 个答案:

答案 0 :(得分:0)

根据您发布的HTML,您在引用过滤器时没有活动控制器。