如何在angularjs中按日期過濾對象列表

Question

問題是：我從JSON格式的數據庫中獲取一些對象的列表。

[{"id":1,"klassBean":{"id":1,"klassName":"11A"},"fname":"Vornic","sname":"Pavel","bdate":1499893200000,"sex":"M","telephone":111,"address":"Soroca"},{"id":2,"klassBean":{"id":1,"klassName":"11A"},"fname":"Gaidarji","sname":"Raisa","bdate":1499893200000,"sex":"F","telephone":222,"address":"Leova"}] 

每個對象都包含字段類型Date。我使用standart角度過濾器通過ng-model映射的某些輸入的輸入信息來顯示網格。用字符串類型，它工作正常。日期以毫秒爲單位進行轉換，但在輸入字段中由datapicker引入字符串。

<tbody> 
    <tr> 
     <th></th> 
     <th><input type="text" ng-model="fname" class="form-control" /></th> 
     <th><input type="text" ng-model="sname" class="form-control" /></th> 
     <th> 
      <select ng-model="sex" class="form-control"> 
       <option></option> 
       <option value="F">F</option> 
       <option value="M">M</option> 
      </select> 
     </th> 
     <th><input type="text" ng-model="telephone" class="form-control" /></th> 
     <th><input type="text" ng-model="address1" class="form-control" /></th> 
     <th><input type="text" ng-model="bdate1 " class="form-control datepicker" /></th> 
    </tr> 
</tbody> 
<tfoot data-ng-repeat="pupil in pupilList | filter : {fname : fname, sname : sname, sex:sex, telephone:telephone,address:address1, bdate:bdate2} "> 
    <tr> 
     <td style="width: 10px;"> 
      <a th:href="@{'/pupil/edit/' + {{pupil.id}}+}"> 
       <i class="fa fa-pencil-square-o" aria-hidden="true" title="Vista"> </i> 
      </a> 
     </td> 
     <th>{{pupil.fname}}</th> 
     <th>{{pupil.sname}}</th> 
     <th>{{pupil.sex}}</th> 
     <th>{{pupil.telephone}}</th> 
     <th>{{pupil.address}}</th> 
     <th>{{pupil.bdate|date : 'yyyy-MM-dd'}}</th> 
    </tr> 
</tfoot> 

我格式化日期由日期過濾器的經典視圖，但實際上它仍然以毫秒爲單位，因此在控制我做下一件事情：以毫秒爲單位減3小時

$scope.$watch('bdate1', function (newValue) { 
    if (angular.isUndefined($scope.bdate1)){ 
     $scope.bdate2=1499893200000; 
     return; 
    } 
    // minus 3 hours timezone 
    $scope.bdate2=new Date($scope.bdate1).getTime()-10800000; 
}); 

字符串場bdate1取得日期。這個值傳遞給其他變量$ scope.bdate2並最終與它進行比較。它工作，但代碼味道。你怎麼解決這個問題 ？

Answer 1

我使用moment.js關於日期的任何事情，它使事情變得如此簡單！

//time in milliseconds then formats to YYYY-MM-DD 
var day = moment(1318781876406).format('YYYY-MM-DD'); 

它也可以自動處理時區。檢查出來：Moment.js Docs

Answer 2

一種方法是將時間戳轉換爲JavaScript日期對象，然後將AngularJS的日期過濾器應用於它們。

var json = [ ... ]; // your JSON here 

json = json.map(function(item) { 
    item.bdate = new Date(item.bdate); 
    return item; 
}); 

現在，你可以簡單地使用AngularJS」日期篩選到bdate場這樣的：

<th>{{pupil.bdate | date: 'yyyy-MM-dd'}}</th> 

下面是在行動上面的代碼片段。

angular.module('myapp', []) 
 
    .controller('myctrl', function($scope) { 
 
    $scope.json = [{ 
 
     "id": 1, 
 
     "klassBean": { 
 
     "id": 1, 
 
     "klassName": "11A" 
 
     }, 
 
     "fname": "Vornic", 
 
     "sname": "Pavel", 
 
     "bdate": 1499893200000, 
 
     "sex": "M", 
 
     "telephone": 111, 
 
     "address": "Soroca" 
 
    }, { 
 
     "id": 2, 
 
     "klassBean": { 
 
     "id": 1, 
 
     "klassName": "11A" 
 
     }, 
 
     "fname": "Gaidarji", 
 
     "sname": "Raisa", 
 
     "bdate": 1499893200000, 
 
     "sex": "F", 
 
     "telephone": 222, 
 
     "address": "Leova" 
 
    }]; 
 

 
    $scope.json = $scope.json.map(function(item) { 
 
     item.bdate = new Date(item.bdate); 
 
     return item; 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myapp"> 
 
    <div ng-controller="myctrl"> 
 
    <div ng-repeat="item in json"> 
 
     {{item.bdate | date: 'yyyy-mm-dd'}} 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

就全部轉換輸入字段中鍵入日期string類型，最後比較兩個字符串

$http({ 
     method: 'GET', 
     url: '/ws/getPupils/'+klassName 
    }).success(function (data) { 
     var values=data; 
     angular.forEach(values, function(item) { 
      item.bdate =moment(new Date(item.bdate)).format('YYYY-MM-DD'); 
     }); 
     $scope.pupilList=data; 
    });