Le filtre de plage de dates angulaire ne fonctionne pas

J'essaie de comprendre pourquoi mon filtre de plage de dates ne fonctionne pas et l'erreur est générée - [$ injector: unpr] Fournisseur inconnu: dateRangeProvider < - dateRange < - dashboardController. J'ai essayé de mettre le 'dateRange' dans mes dépendances et $ filter, je ne sais pas si ce que j'ai fait était correct ou pas. Toute aide est certainement appréciée! Merci!Le filtre de plage de dates angulaire ne fonctionne pas

Mon HTML que je suis en train de filtrer entre deux dates pour saisir l'identifiant des produits

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

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

Source

2017-02-14 Dustin Lee

Il y avait quelques problèmes, mais la question principale est comment vous avez créé le filtre. le filtre doit être ajouté à votre module quelque chose comme angular.module('mymodule', []).filter('dateRange', fn). Autre que vous devez faire face à ce que vous voulez rendre lorsque les filtres ne sont pas encore entièrement remplis, et vous avez eu product.completed_date au lieu de item.completed date dans votre fonction de filtre.

Ici vous avez un exemple de travail (manque juste la façon dont vous voulez gérer lorsque les filtres d'entrée ne sont pas encore entièrement rempli):

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>

Source

2017-02-14 07:56:39 Canastro

Hey Canastro! Merci beaucoup de m'avoir éduqué à ce sujet, je ne me suis pas rendu compte que je devais le faire et il est logique que je doive ajouter à mon module. Donc, dans mon app.js j'ai effectivement donné à mon module angulaire une var de l'application. Donc, fondamentalement, je viens de faire app.filter et il ne jette pas une erreur. Cependant, j'ai changé la fonction de filtre à vos spécifications et il n'est toujours pas filtrant par les dates ... essayant de filtrer quand il a été créé à, le "createdAt". –

Avez-vous changé les endroits où je suis parti en tant que 'completed_date' à' created_at'? – Canastro

Oui, je l'ai changé en created_at et il ne filtre pas encore, mais il filtre pour la première valeur d'entrée où vous faites un suivi par $ index. Donc je console.log() juste avant la 2ème instruction if et dans la console chromée elle montre qu'elle entre dans la fonction forEach mais ensuite console.log dans la 2ème instruction if et elle n'imprime jamais ce qui est dans le fichier console.log. Il semble que cela ne pénètre jamais cette deuxième déclaration si –

Voici la réponse que je suis venu avec , pour d'autres qui sont aussi intéressés.

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; 

}; 
})

Mon HTML Tableau

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

Source

2017-02-16 07:38:02

Le filtre de plage de dates angulaire ne fonctionne pas

Répondre

Questions connexes