如何使用AngularJS处理数据库中的日期

Question

我正在从SQLite获取数据并将其分配给我的$scope.loans：

{
    "id": 1,
    "book_id": 2,
    "patron_id": 3,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": "2017-01-17",
}
{
    "id": 2,
    "book_id": 3,
    "patron_id": 4,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": null,
}

在我看来，我

正在尝试将数据绑定到输入标签中，以便用户可以编辑和提交更改（我使用的是 pug 模板引擎）

table
  thead
    tr
      th Loaned On
      th Return By
      th Returned On
  tbody
    tr(ng-repeat='loan in loans')
      td(type='date' ng-model='loan.loaned_on' value='{{loan.loaned_on}}')
      td(type='date' ng-model='loan.loaned_on' value='{{loan.return_by}}')
      td(type='date' ng-model='loan.loaned_on' value='{{loan.returned_on}}')

现在我收到一个 AngularJS 错误，说 ngModel 不是日期对象。
我知道我应该使用日期构造函数将日期字符串转换为日期对象，但我的问题是做这样的事情的最佳方法是什么？

溶液

我想也许我会找到更好的方法，但我没有。
所以我遍历 loan 数组并为每个日期字符串分配一个日期对象。

Answer 1

你可以这样做，这很简单，而且内联。

td(type='date' ng-model='new Date(loan.loaned_on)' value='{{loan.loaned_on}}')

Answer 2

您指定了输入类型date但将日期字符串分配给model不期望的model。相反，将值转换为日期对象并分配它，如下所示：

tbody
tr(ng-repeat='loan in loans')
  td(type='date' ng-model='loan.loaned_on' value='{{new Date(loan.loaned_on)}}')

Answer 3

创建日期

您可以简单地使用默认构造函数 Date ，如果您的日期在此 ISO 8601 表单中。

new Date("2017-01-25")

如果您想

对日期进行一些计算，或者如果您想以另一种格式传递日期，我建议您使用 moment.js ：

var myDate = moment("2017-01-25", "YYYY-MM-DD");
var newDate = myDate.add(7, "days");

<小时 />

将其传递到范围

将Date传递给 HTML 的最简单方法是在 scope 函数中传递它。这样，您可以简单地在 HTML 中调用它。

控制器（带日期构造函数）：

$scope.createDate = function(dateString) {
    return new Date(dateString);
};

控制器（带moment.js）：

$scope.createDate = function(dateString) {
    return moment("2017-01-25", "YYYY-MM-DD");
};

HTML （哈巴狗模板）：

td(type='date' ng-model='createDate(loan.loaned_on)' value='{{loan.loaned_on}}')

Answer 4

试试这个：

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function ($scope) {
    $scope.loans = [{
    "id": 1,
    "book_id": 2,
    "patron_id": 3,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": "2017-01-17"
},
{
    "id": 2,
    "book_id": 3,
    "patron_id": 4,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": null
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <thead>
      <tr>
        <th>Loaned On</th> 
        <th>Return By</th>
        <th>Returned On</th>   
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='loan in loans'>
        <td><input type='date' ng-model='loan.loaned_on' value='{{loan.loaned_on}}'/></td>
      <td><input type='date' ng-model='loan.return_by' value='{{loan.return_by}}'/></td>
      <td><input type='date' ng-model='loan.returned_on' value='{{loan.returned_on}}'/></td>
      </tr>  
    </tbody>
  </table>
</div>