角度日期範圍過濾器不工作

我想弄清楚爲什麼我的日期範圍過濾器不工作，我得到的錯誤 - [$注入器：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

角度日期範圍過濾器不工作

回答

相關問題