Question

我正在试图找出为什么我的日期范围过滤器无法正常工作并且我被抛出错误 - [$ injector：unpr]未知提供者：dateRangeProvider＆lt; - dateRange＆lt; - dashboardController。我尝试将'dateRange'放在我的依赖项和$ filter中，不确定我所做的是否正确。任何帮助肯定是赞赏！谢谢！

我的HTML，我试图在两个日期之间过滤以获取产品的ID

app.controller('dashboardController', ['$scope', '$filter', 'OpFactory', function($scope, $filter, OpFactory){

function getProducts(){
  OpFactory.getProducts(function(data){
   $scope.products = data;
   console.log("data from getProducts function in dashboardcontroller", data);
 })
}
getProducts();

$filter('dateRange', function() {
       return function( product, fromDate, toDate ) {
           var filtered = [];
           console.log(fromDate, toDate);
           var from_date = Date.parse(fromDate);
           var to_date = Date.parse(toDate);
           angular.forEach(product, function(item) {
               if(item.completed_date > from_date && product.completed_date < to_date) {
                   filtered.push(item);
               }
           });
           return filtered;
       };
   });
}]);

这是我的DashboardController

 $(document).on("click","#childern li",function(){

            var subFolderID = $(this).attr( "id" );

            var objlst=    $(this);
            var request;
            request = $.ajax({
                context:this,
                url: url,
                method: "POST",

                data: {'id': subFolderID},
                ContentType: 'application/json'
            });
            request.done(function( response ) {

                var result = jQuery.parseJSON(response);

                var trHTML="";
                for(var i = 0, l = result.length; i < l; i++){
                    trHTML += '<tr><td class="col-md-2">' + result[i].name +
                        '</td><td class="newName">' + result[i].name +
                        '</td></tr>';

                }


                $('#records_table').append(trHTML);

            });
            request.fail(function( jqXHR, textStatus ) {
                alert( "Request failed: " + textStatus );
            });
        });

Answer 1

存在一些问题，但主要问题是您如何创建过滤器。过滤器应附加到您的模块，如product.completed_date。

除此之外，当过滤器尚未完全填充时，您必须处理要渲染的内容，并且过滤器函数中的日期为item.completed而不是angular.module('webapp', []) .filter('dateRange', function () { return function(product, fromDate, toDate) { var filtered = []; console.log(fromDate, toDate); if (!fromDate && !toDate) { return product; } var from_date = Date.parse(fromDate); var to_date = Date.parse(toDate); angular.forEach(product, function(item) { if (item.createdAt > from_date && item.createdAt < to_date) { filtered.push(item); } }); return filtered; }; }) .controller('dashboardController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) { $scope.products = []; function getProducts() { $timeout(function() { $scope.products = [{ _id: 1, createdAt: new Date(2000, 1, 1) }, { _id: 2, createdAt: new Date(2001, 1, 1) }, { _id: 3, createdAt: new Date(2002, 1, 1), }, { _id: 4, createdAt: new Date(2003, 1, 1) }]; }, 500); } getProducts(); }]);。

这里有一个工作示例（只是缺少输入过滤器尚未完全填充时的处理方式）：

＆＃13;

<!DOCTYPE html>
    <html ng-app="webapp">
        <head>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
        </head>
        <body ng-app="webapp">
            <div ng-controller="dashboardController">
                <input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'>
                <input type="date" ng-model="from_date">
                <input type="date" ng-model="to_date">
                <div ng-repeat="product in products | dateRange : from_date : to_date | filter: productFilter track by $index">
                    <p>Total Inputs: {{product.createdAt}} :: {{product._id}}</p>
                </div>
            </div>
        </body>
    </html>

＆＃13;

{{1}}

＆＃13;

Answer 2

这是我想出的答案，也是其他感兴趣的人。

app.filter('dateRange', function () {
 return function(product, fromDate, toDate) {
     var filtered = [];
     console.log(fromDate, toDate, filtered);

     if (!fromDate && !toDate) {
         return product;
     }

     var from_date = Date.parse(fromDate);
     var to_date = Date.parse(toDate);
     angular.forEach(product, function(item) {
       console.log('in the forEach function')
       var createdAt = Date.parse(item.createdAt);
         if (from_date && to_date && createdAt > from_date && createdAt < to_date) {
           console.log('in the if statement', filtered)
           filtered.push(item);
         }
     })

    return filtered;

 };
})

我的HTML表格

<table class="receivingDataTable" datatable='ng' style="width: 1000px;">
 <tr>
    <th>Date</th>
    <th>Container #</th>
    <th>Cut #</th>
    <th>CTNS #</th>
    <th>Pieces</th>
    <th>Receiving #</th>
    <th>Remarks</th>
  </tr>
  <tr ng-repeat="product in filtered = (products | dateRange: from_date : to_date)">
    <td>{{product.createdAt | date: "MM/dd/yyyy"}}</td>
    <td>{{product.container_number}}</td>
    <td>{{product.cut_number}}</td>
    <td>{{product.ctns_number}}</td>
    <td>{{product.pieces}}</td>
    <td>{{product._id}}</td>
    <td>{{product.remarks}}</td>
  </tr>
</table>

角度日期范围过滤器不起作用

2 个答案: