angularJS：過濾器JSON數據w.r.t日期範圍

Question

我對AngularJS來說是全新的。這是我的HTML代碼

<div ng-controller="DateRangeCtrl"> 

     <div class="container"> 
     <div class="form-horizontal"> 
      <input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt1" is-open="opened1" max="maxFromDate" ng-change="setMinToDate()"/> 
      <button class="btn btn-sm" ng-click="open1($event)"><span class="glyphicon glyphicon-calendar"></span></button> 
     </div> 
     <div class="form-horizontal"> 
      <input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt2" is-open="opened2" min="minToDate" max="maxToDate" ng-change="filterDateAdded()"/> 
      <button class="btn btn-sm" ng-click="open2($event)"><span class="glyphicon glyphicon-calendar"></span></button> 
     </div> 

     <p><strong>Selected From Date: </strong> {{dt1 | date:'mediumDate'}}</p> 
     <p><strong>Selected To Date: </strong> {{dt2 | date:'mediumDate'}}</p> 
     </div> 
     <hr /> 
     <table class="table table-bordered"> 
     <thead> 
      <tr> 
      <th>ID</th> 
      <th>Date Added</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="item in items | orderBy:mySortFunction "> 
      <td>{{item.ID}}</td> 
      <td>{{ parseDate(item.dateAdded) | date:'longDate'}}</td> 
      </tr> 
     </tbody> 
     </table> 

    </div> 

以下是我的角碼：

testApp.config(function (datepickerConfig, datepickerPopupConfig) { 
      datepickerConfig.showWeeks = false; 
      datepickerPopupConfig.showButtonBar = false; 
    }); 

    testApp.controller('DateRangeCtrl', function($scope) { 

     $scope.items = [ 
      {ID: "1", dateAdded: "01-04-2013"}, 
      {ID: "2", dateAdded: "12-01-2013"}, 
      {ID: "3", dateAdded: "12-31-2013"}, 
      {ID: "4", dateAdded: "01-12-2014"}, 
      {ID: "5", dateAdded: "03-04-2014"} 

     ]; 

     $scope.parseDate = function(input){ 
      var parts = input.split('-'); 
      var newParts = new Date(parts[2], parts[0]-1, parts[1]); // Note: months are 0-based 
      return newParts; 
     } 


     $scope.open1 = function($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened1 = true; 
     }; 

     $scope.maxFromDate = new Date(); 

     $scope.maxToDate = new Date(); 

     $scope.setMinToDate = function(){ 
     $scope.dt2 = null; 
     $scope.minToDate = $scope.dt1; 
     }; 

     $scope.open2 = function($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened2 = true; 
     }; 
    }); 

如何過濾基於選擇的日期行？對於例如如果我在「從」 datePicker中選擇「01/01/2014」，那麼我應該能夠看到「添加日期」列的值超過「2014年1月1日」的所有行。輸出將是行與ID：4和5

當「到」日期選擇器選擇

請幫我出這應該表現字面等效方式。我卡住了！

更新： HTML

<tr ng-repeat="item in items | filter:dateFilter "> 

JS

$scope.dateFilter = function (item) { 
      return (item.dateAdded < $scope.dt2); 
     }; 

難道我做錯了什麼？它仍然無法正常工作....

Answer 1

通過某些打了N試驗方法你的代碼，我最終得到了它的權利。問題在於「item.dateAdded」字符串必須轉換爲Date對象。解決方法是在js文件中添加以下一段代碼：

$scope.filterDateAdded = function(){ 
if($scope.dt1 != null) 
{ 
    $scope.dateFilter = function (item) { 
    return ($scope.parseDate(item.dateAdded) >= $scope.dt1 && $scope.parseDate(item.dateAdded) <= $scope.dt2); 
    }; 
} 

};

乾杯！

Answer 2

改變這樣

<input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt2" is-open="opened2" min="minToDate" max="maxToDate" ng-model="search" ng-change="filterDateAdded()"/> 


    <tr ng-repeat="item in items | filter:dateFilter"> 



$scope.filterDateAdded=function() 
    { 

       $scope.dateFilter = function() { 
        var result=[]; 
        for(var i in $scope.item) 
        { if($scope.item[i].dateAdded >$scope.search) 
          { 
            result.push($scope.item[i]); 
           } 

          } 
       return result; 
      }; 
    }