Angularjs ng-model 值在被另一个函数修改时不会在视图中更新答案

【问题标题】：Angularjs ng-model value not updating in view when modified by another functionAngularjs ng-model 值在被另一个函数修改时不会在视图中更新
【发布时间】：2015-03-19 10:53:31
【问题描述】：

我正在使用 AngularJS 创建一个工资单应用程序，其中包含一个页面，用户可以在该页面中编辑工作的开始时间和结束时间字段，并能够通过修改另外两个字段（小时和分钟），指的是在工作上工作的时间长度。

到目前为止，当用户使用 ng-change 更改开始时间或结束时间字段时，我已经能够使小时和分钟字段自动正确更新。我现在正试图以另一种方式做事，以便结束时间根据小时和分钟字段自动更新，虽然存储结束时间的变量已正确更新，但显示结束时间的输入字段没有改变。

这是四个字段的 HTML：

        <label class="item item-input">
            <span class="input-label">Start Time</span>
            <input type="time" class="item-input input-label editable" ng-model="data.startTimeObject" ng-change="updateHoursAndMinutes('start')"/>
        </label>
        <label class="item item-input">
            <span class="input-label">End Time {{data.endTimeObject.getHours()}}</span>
            <input type="time" class="item-input input-label editable" ng-model="data.endTimeObject" ng-change="updateHoursAndMinutes('end')" />
        </label>
        <label class="item item-input">
            <span class="input-label">Hours</span>
            <input type="number" class="item-input input-label editable" min="0" max="24" ng-model="editedRecord.hours" ng-change="updateEndTime()" />
        </label>
        <label class="item item-input">
            <span class="input-label">Minutes</span>
            <input type="number" class="item-input input-label editable" min="0" max="59" ng-model="editedRecord.minutes" ng-change="updateEndTime()" />
        </label>

以及updateEndTime()函数中的相关代码：

$scope.updateEndTime = function(){
    .
    .
    .
    .

    $scope.data.endTimeObject.setHours(savedEndTimeHours + actualHourDifference);
    $scope.data.endTimeObject.setMinutes(savedEndTimeMinutes + actualMinuteDifference);
}

“结束时间”标签旁边的 {{data.endTimeObject.getHours()}} 从 updateEndTime() 函数更新时正确显示小时数，但用户可以手动编辑结束时间的字段不会自动显示更新的结束时间值。

【问题讨论】：

标签： javascript angularjs angular-ngmodel ionic

【解决方案1】：

不知道你是否还有这个问题，但也许其他人偶然发现了这个问题。使用 setSeconds 更新日期对象适用于对象本身（我可以在 toast 中输出它），但输入字段不会显示新值。

最后，我要做的是设置一个全新的日期对象，而不仅仅是使用函数。在你的情况下，也许你可以做类似的事情

$scope.updateEndTime = function() {
    // previous statements
    var newTime = new Date(1970, 0, 1, 0, 0, 0, 0);
    newTime.setHours(savedEndTimeHours + actualHourDifference);
    newTime.setMinutes(savedEndTimeMinutes + actualMinuteDifference);
    $scope.data.endTimeObject = newTime;
}

如果需要，您可以在新日期对象中重用旧日期对象中的值。

为什么这行得通我不太清楚（我自己对 AngularJS 很陌生），但我猜除非替换整个对象，否则无法识别更改。

【讨论】：