如何在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; 
    });