javascript - Angular 日期范围过滤器不起作用

标签 javascript angularjs angular-filters ng-filter angular-daterangepicker

我试图弄清楚为什么我的日期范围过滤器不工作并且我被抛出错误 - [$injector:unpr] Unknown provider: 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>

这是我的仪表板 Controller

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

最佳答案

有一些问题,但主要问题是您如何创建过滤器。过滤器应附加到您的模块,如 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>

关于javascript - Angular 日期范围过滤器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42220284/

相关文章:

javascript - DynamoDB Vogels 中索引 stringSet 的 ValidationException

javascript - Angularjs $http 不会在 GET 请求中调用 api

javascript - AngularJS 使用来自 Controller 的指令

javascript - 使用 Javascript 在 li 中创建 span 元素

javascript - Kendo UI Scheduler 未正确绑定(bind)资源

javascript - jQuery 不在 AJAX POST 请求上发送 JSON

javascript - 为什么将foreignObject附加到SVG中会破坏jquery ui的调整大小?

javascript - 印度格式的 Angular 货币过滤器

javascript - ng-repeat with limitTo 在限制下降时向后动画

angularjs - 使用 AngularJS $filter ('filter' ) 和 OR