1

날짜 범위 필터가 작동하지 않는 이유를 알고 싶습니다. 오류가 발생했습니다. [$ injector : unpr] 알 수없는 공급자 : dateRangeProvider < - dateRange < - dashboardController. 'dateRange'를 내 의존성 및 $ 필터에 넣으려고했는데 정확하지 않던 지 확실하지 않았습니다. 어떤 도움이라도 대단히 감사합니다! 감사! 나는 제품의 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> 

이 내 몇 가지 문제가 있었다

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

답변

2

DashboardController하지만 주요 문제 필터를 만든 방법입니다. 필터는 angular.module('mymodule', []).filter('dateRange', fn)과 같은 모듈에 추가되어야합니다.

필터가 아직 채워지지 않은 상태에서 렌더링하려는 내용을 처리해야하고 필터 기능에 item.completed 대신 product.completed_date이 있어야합니다. 여기

당신은 예 (당신이 입력 필터가 아직 완전히 충전되지 않을 때 처리하는 방법을 실종) 작업이 있습니다

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

+0

이봐 Canastro! 저를 교육 해 주셔서 대단히 감사합니다. 저는 그 일을해야한다는 것을 깨닫지 못했습니다. 제 모듈에 추가해야한다는 말이 있습니다. 그래서 내 app.js에서 나는 내 각진 모듈에 많은 응용 프로그램을 제공했다. 그래서 난 기본적으로 app.filter 않았다 그리고 그것은 오류를 throw하지 않습니다. 그러나 필자는 필터 기능을 사양으로 변경했으며 날짜별로 필터링하지 않았습니다 ... "createdAt"에서 필터를 만들 때 필터링하려고했습니다. –

+0

'completed_date' (을)를'created_at' (으)로 변경 한 장소는 있습니까? – Canastro

+0

예, created_at로 변경했는데 아직 필터링하지는 않았지만 $ index로 추적하는 첫 번째 입력 값을 필터링합니다. 두 번째 if 문 바로 앞에 console.log()가 표시되며 크롬 콘솔에서 forEach 함수를 입력했지만 두 번째 if 문 안에 console.log가 표시되고 console.log에있는 내용이 인쇄되지 않습니다. 그게 결코 두 번째 if 문을 입력하지 않는 것 같습니다 –

0

내가 생각 해낸 대답은 , 관심있는 다른 사람들에게도 도움이됩니다.

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> 
관련 문제