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

时间:2017-01-15 12:32:49

标签: javascript angularjs

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

$('#CDRTABLE #'+i).toggle(); // # not .

在我看来,我试图将数据绑定到输入标签,以便用户可以编辑和提交更改(我使用pug模板引擎)

{
    "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,
}

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

溶液

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

4 个答案:

答案 0 :(得分:0)

创建日期

如果您的日期是此ISO 8601表单,则可以使用Date的默认构造函数。

new Date("2017-01-25")

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

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

将其传递到范围

Date传递给HTML的最简单方法是在范围函数中传递它。通过这种方式,您只需在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}}')

答案 1 :(得分:0)

你可以这样做,这很简单,内联。

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

答案 2 :(得分:0)

您将输入类型指定为date,但您将日期字符串分配给model不期望的model。而是将值转换为日期对象并按如下所示进行分配:

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

答案 3 :(得分:0)

试试这个:

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>