Question

接下来的问题是：我以JSON格式从DB获取了一些对象的列表。

[{"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。我使用标准角度过滤器通过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>

我按日期过滤器将日期格式化为经典视图，但实际上它仍然以毫秒为单位，所以在控制器中我做了下一件事：

$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以毫秒减去3小时的日期。该值传递给$ 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＆＃39;日期过滤器。

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

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

现在，您可以简单地使用AngularJS＆＃39;日期过滤到bdate字段，如下所示：

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

以下是上述代码的片段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

刚刚将所有输入字段的日期转换为字符串类型，最后比较了两个字符串

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

如何在angularjs中按日期过滤对象列表

3 个答案: