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

时间:2015-01-21 02:05:23

标签: javascript angularjs angular-ngmodel ionic

我正在使用AngularJS创建工资单应用程序,其中包含一个页面,用户可以在该页面中编辑作业的开始时间和结束时间字段,以及通过修改另外两个字段来更改结束时间(小时和分钟),指的是工作时间。

到目前为止,当用户使用ng-change更改开始时间或结束时间字段时,我已经能够使小时和分钟字段自动更新。我现在试图以相反的方式做事,以便根据小时和分钟字段自动更新结束时间,尽管存储结束时间的变量已正确更新,但显示结束时间的输入字段不会#39; t改变。

这里是四个字段的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);
}
&#34;结束时间&#34;旁边的

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

1 个答案:

答案 0 :(得分:1)

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

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

的事情
$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很新),但我猜想除非整个对象被替换,否则无法识别更改。