Angular JS ng-table日期範圍過濾器問題

我有一個日期範圍過濾器的列表，我正在使用ng-table。我可以使用ng-table輕鬆地過濾名稱和其他字符串/數字字段。但日期範圍過濾器似乎沒有工作。Angular JS ng-table日期範圍過濾器問題

上市

{ 
    "data":[ 
     { 
     "cellphone":"24234234234", 
     "createddate":"09/09/2014", 
     "firstname":"Giacomo", 
     "resellerid":"747845473" 
     }, 
     { 
     "cellphone":"24234234234", 
     "createddate":"09/02/2010", 
     "firstname":"Tomy", 
     "resellerid":"747783" 
     }, 
     { 
     "cellphone":"999999", 
     "createddate":"09/02/2010", 
     "firstname":"Sunny", 
     "resellerid":"2312312" 
     } 
    ] 
}

我使用NG-重複遍歷這個JSON對象的json數據。

過濾盒是在表外，我使用以下代碼

<table class="table display table-striped table-bordered" ng-table="tableParams"> 

       <tr ng-repeat="customer in $data | filter: id | filter :name 
       |filter :createdfrom> 
       <td data-title="'Reseller ID'" sortable="'resellerid'"> 
       {{customer.resellerid}} 
       </td> 
       <td data-title="'Reseller Name'" sortable="'firstname'"> 
       {{customer.firstname}} {{customer.lastname}} 
       </td> 
       <td data-title="'Created Date'" sortable="'createddate'"> 
       {{customer.createddate}} 
       </td> 
       </tr> 
    </table>

和在過濾器箱，其是表

    <div class="col-sm-2"> 
         <input type="text" placeholder="747873" id="exampleInputEmail2" 
          class="form-control" ng-model="id.resellerid"> 
        </div> 
        <div class="col-sm-2"> 
         <input type="text" placeholder="Enter Name" 
          id="exampleInputPassword2" class="form-control" 
          ng-model="name.firstname"> 
        </div> 
        <input class="form-control" type="text" 
           datepicker-popup="{{format}}" ng-model="createdfrom.createddate" is-open="opened1" 
           min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" 
           close-text="Close" placeholder="DD/MM/YY" id="date1" > 
           <span 
           class="input-group-btn"> 
           <button type="button" class="btn btn-default" 
            ng-click="open1($event)"> 
            <i class="glyphicon glyphicon-calendar"></i> 
           </button> 
          </span> 
         </div>

但日期字段沒有被過濾JSON外數據。

有什麼方法可以使用「From」和「To date」字段中的日期過濾數據嗎？

任何幫助/提示將grely讚賞。

感謝 jayesh

來源

2014-09-23 Jayesh Ambali

你肯定ng-model="createdfrom.createddate"任何數據附加到$範圍是什麼？

嘗試添加<pre>createdfrom.createddate: {{ createdfrom.createddate }}</pre>以查看該datepicker指令是否更改$ scope中的值。

編輯：檢查工作示例：http://jsfiddle.net/ulfryk/vbvyt8we/

EDIT2：

我找到了答案：

<tr ng-repeat="customer in $data | filter: id | filter :name 
      |filter :createdfrom>

你|filter :createdfrom後>之前錯過"：d

EDIT3：

datepicker在模型認爲Date類型的值和它的格式是鑑於層String表示。所以，你可能需要一些其他的指令或過濾該模型數據轉換成格式化字符串，或查看值傳遞給其他一些領域模型：

yourModule.directive('viewValueModel', [ 
    '$parse', 
    function ($parse) { 
     return { 
      require: 'ngModel', 
      link: function (scope, element, attrs, ngModelCtrl) { 
       ngModelCtrl.$viewChangeListeners.push(function() { 
        $parse(attrs.viewValueModel).assign(scope, ngModelCtrl.$viewValue); 
       }); 
      } 
     }; 
    } 
]);

，並使用它像這樣：

<input 
    class="form-control" 
    type="text" 
    datepicker-popup="{{format}}" 

    ng-model="someFakeModelPlaceholder" 
    view-value-model="createdfrom.createddate" 

    is-open="opened1" 
    min-date="minDate" 
    max-date="'2015-06-22'" 
    datepicker-options="dateOptions" 
    date-disabled="disabled(date, mode)" 
    ng-required="true" 
    close-text="Close" 
    placeholder="DD/MM/YY" 
    id="date1">

來源

2014-09-23 08:35:44 ulfryk

看來我的日期選取器根本沒有以正確的格式給出日期。我使用了引導日期選擇器 - http://angular-ui.github.io/bootstrap/ - 當我在datepicker中選擇09/02/2010時，所選日期顯示如下 - createdfrom.createddate：「2010-02-08T18： 30：00.000Z「我在控制器中格式化了日期選擇器日期」$ scope.format ='dd/MM/yyyy';「並在文本框中完美顯示日期。可能是什麼問題？ – 2014-09-23 09:12:40

添加編輯回答 - 它可能只是HTML錯誤 - ''''在'>'開啓''標記之前缺少''。 – ulfryk 2014-09-23 10:41:08

新增第3次編輯回答第2和第3個應該修復所有內容:) – ulfryk 2014-09-23 11:06:23

我使用UI-Bootstrap日期選擇器創建了這一個。看看這是否解決了你的問題。

// Code goes here 
 

 
var myapp = angular.module('NgTableExample', ['ngAnimate', 'ui.bootstrap', 'ngTable']); 
 

 
function parseDate(input) { 
 
    return Date.parse(input); 
 
} 
 

 
myapp.filter("dateRangeFilter", function() { 
 
    return function(items, from, to) { 
 
    var df = parseDate(from); 
 
    var dt = parseDate(to); 
 
    var result = []; 
 
    for (var i = 0; i < items.length; i++) { 
 
     var date_bet = items[i].datetime; 
 
     if (date_bet > df && dt > date_bet) { 
 
     result.push(items[i]); 
 
     } 
 
    } 
 
    return result; 
 
    }; 
 
}); 
 

 
myapp.controller("ExampleCtrl", function($scope, $filter, NgTableParams) { 
 

 
    var self = this; 
 
    var data = [{ 
 
    name: "Moroni", 
 
    age: 50, 
 
    datetime: 1450562394000 
 
    }, { 
 
    name: "Simon", 
 
    age: 43, 
 
    datetime: 1450562394000 
 
    }, { 
 
    name: "Jacob", 
 
    age: 27, 
 
    datetime: 1450648794000 
 
    }, { 
 
    name: "Nephi", 
 
    age: 29, 
 
    datetime: 1450648794000 
 
    }, { 
 
    name: "Christian", 
 
    age: 34, 
 
    datetime: 1450475994000 
 
    }, { 
 
    name: "Tiancum", 
 
    age: 43, 
 
    datetime: 1450475994000 
 
    }, { 
 
    name: "Jacob", 
 
    age: 27, 
 
    datetime: 1450475994000 
 
    }]; 
 

 
    self.sensorTableData = new NgTableParams({ 
 
    count: 7 
 
    }, { 
 
    dataset: data 
 
    }); 
 

 
    $scope.today = function() { 
 
    $scope.dt2 = new Date(2015, 11, 26); 
 
    $scope.dt1 = new Date(2015, 11, 17); 
 

 
    }; 
 

 

 

 
    $scope.today(); 
 
    $scope.toggleMin = function() { 
 
    $scope.minDate = $scope.minDate ? null : new Date(); 
 
    }; 
 
    $scope.toggleMin(); 
 
    $scope.maxDate = new Date(2020, 5, 22); 
 

 
    $scope.open1 = function($event) { 
 
    $scope.status1.opened = true; 
 
    }; 
 

 
    $scope.open2 = function($event) { 
 
    $scope.status2.opened = true; 
 
    }; 
 

 
    $scope.setDate = function(year, month, day) { 
 
    $scope.dt1 = new Date(year, month, day); 
 
    $scope.dt2 = new Date(year, month, day); 
 

 
    }; 
 

 
    $scope.dateOptions = { 
 
    formatYear: 'yy', 
 
    startingDay: 1 
 
    }; 
 

 
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
 
    $scope.format = $scope.formats[0]; 
 

 
    $scope.status1 = { 
 
    opened: false 
 
    }; 
 

 
    $scope.status2 = { 
 
    opened: false 
 
    }; 
 

 

 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
 
    <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css"> 
 
    <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="NgTableExample"> 
 
    <h1>Date Range Filter For Ng-table!</h1> 
 

 
    <div ng-controller="ExampleCtrl as exc"> 
 
    <h4>From Date</h4> 
 
    <p class="input-group"> 
 
     <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt1" is-open="status1.opened" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
 
     <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
 
     </span> 
 
    </p> 
 
    <h4>To Date</h4> 
 
    <p class="input-group"> 
 
     <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt2" is-open="status2.opened" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
 
     <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
 
     </span> 
 
    </p> 
 

 
    <div> 
 
     <table ng-table="exc.sensorTableData" class="table table-condensed table-bordered table-striped"> 
 
     <tr ng-repeat="row in $data | dateRangeFilter:dt1:dt2"> 
 
      <td data-title="'Name'" sortable="'name'">{{row.name}}</td> 
 
      <td data-title="'Age'" sortable="'age'">{{row.age}}</td> 
 
      <td data-title="'Date'" sortable="'age'">{{row.datetime | date:'dd-MMMM-yyyy'}}</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-12-22 05:34:58

我試圖實現你的代碼，但它不適用於我，它顯示的項目未定義 – User0706 2016-06-27 07:19:28

人士Himanshu上耆那教的例子的後續行動，我不得不調整它得到它的工作。

(function() { 
'use strict'; 
angular.module('app').filter("dateRangeFilter", ['$filter', function ($filter) { 
    return function (items, from, to) { 
     var df = from; 
     var dt = to; 
     var result = []; 
     for (var i = 0; i < items.length; i++) { 
      var date_bet = parseDate(items[i].StartDate); 
      if (date_bet >= df && dt >= date_bet) { 
       result.push(items[i]); 
      } 
     } 
     return result; 
    }; 
}]);

}）（）;

來源

2017-10-15 13:44:57 tfa

Angular JS ng-table日期範圍過濾器問題

回答

相關問題