角度日期范围过滤器不工作

我想弄清楚为什么我的日期范围过滤器不工作，我得到的错误 - [$注入器：unpr]未知提供者：dateRangeProvider < - dateRange < - dashboardController。我试图把'dateRange'放在我的依赖项和$ filter中，不知道我所做的是否正确。任何帮助绝对赞赏！谢谢！角度日期范围过滤器不工作

我的，我想两个日期之间的过滤抢了产品的ID HTML

<input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'> 
<input type="date" ng-model="to_date"> 
<input type="date" ng-model="from_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>

这是我DashboardController

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; 
     }; 
    }); 
}]);

来源

2017-02-14 Dustin Lee

有一些问题，但主要的问题是你如何创建过滤器。过滤器应附加到您的模块，如angular.module('mymodule', []).filter('dateRange', fn)。

除此之外，您还必须处理在滤镜未完全填充时您要呈现的内容，并且您的滤镜功能中有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(); 
 
     }]);

<!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>

来源

2017-02-14 07:56:39 Canastro

嘿Canastro！非常感谢你对我的教育，我没有意识到我必须这样做，并且有必要追加到我的模块中。所以在我的app.js中，我实际上给了我的角度模块一个应用程序的变种。所以我基本上只是做了app.filter，它不会抛出错误。不过，我将滤镜功能更改为您的规格，并且仍未按日期进行过滤...尝试按照创建时的过滤条件进行过滤，即“createdAt”。 –

您是否将我作为'completed_date'离开的地方更改为'created_at'？ – Canastro

是的，我确实将其更改为created_at，但它尚未进行过滤，但它会根据$ index跟踪的第一个输入值进行过滤。因此，我在console.log（）之前的第二个if语句和chrome控制台中显示它确实输入了forEach函数，但是随后我在第二个if语句中使用了console.log，并且它从不显示console.log中的内容。似乎它从来没有进入第二条语句 –

这里是我想出了答案，对于其他感兴趣的人也是如此。

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>

来源

2017-02-16 07:38:02

角度日期范围过滤器不工作

回答

相关问题