javascript - Angularjs:正确设置日期时间本地，但提交 null

Question

我正在尝试为两个输入日期时间本地字段设置默认值。我正在使用 angularjs 1.5.5。我的 .jsp 代码如下所示:

<div class="row">
    <div class="form-group col-md-12">
        <label class="col-md-2 control-label" for="dateTo">Date to</label>
        <div class="col-md-7">
            <input type="datetime-local" ng-model="ctrl.map.dateTo" id="dateTo" class="form-control input-sm" />
        </div>
    </div>
</div>

(与第二个字段类似)

这是我设置字段的 js 脚本:

$(document).ready(function(){
    var now = new Date();

    var timestampDateTo   = now.getTime() - now.getTimezoneOffset()*60000;
    var timestampDateFrom = now.getTime() - now.getTimezoneOffset()*60000 - 2*60*60*1000;

    var dateTo = new Date(timestampDateTo);
    var dateFrom = new Date(timestampDateFrom);

    $("input[id=dateTo]").val(dateTo.toISOString().substring(0,19));
    $("input[id=dateFrom]").val(dateFrom.toISOString().substring(0,19));
});

我得到了 日期字段填写得很好，

到目前为止一切顺利，但是当我提交表单时，这些字段是由 空值。

这是为什么？请注意，当我“手动”设置此字段时，它们会正确提交。

Answer 1

这是因为您设置值的方式，您直接更改 DOM 而 Angular 没有接受更改，您应该更改 ng-model 对象，而不是 DOM。在你的 Controller /Angular 代码中，你应该有类似的内容:

var now = new Date();

var timestampDateTo   = now.getTime() - now.getTimezoneOffset()*60000;
var timestampDateFrom = now.getTime() - now.getTimezoneOffset()*60000 - 2*60*60*1000;

var dateTo = new Date(timestampDateTo);
var dateFrom = new Date(timestampDateFrom);

$scope.ctrl.map.dateTo = dateTo;

在使用 Angular 时，您应该避免直接设置 DOM 值，这不是一个好习惯，最好在范围内更新 Angular 值，并让 Angular 为您更新 DOM