AngularJS를 사용하여 급여 응용 프로그램을 만듭니다. 사용자가 작업의 시작 시간 및 종료 시간 필드를 편집 할 수있는 페이지를 포함 할뿐만 아니라 작업에 소요 된 시간의 길이를 나타내는 또 다른 두 필드 (시간과 분)를 수정하여 종료 시간을 변경할 수 있습니다.다른 기능으로 수정할 때 각도 모드 모델 값이 업데이트되지 않음
지금까지 사용자가 변경을 사용하여 시작 시간 또는 종료 시간 필드를 변경할 때 시간 및 분 필드를 자동으로 올바르게 업데이트 할 수있었습니다. 끝 시간을 시간과 분 필드를 기반으로 자동으로 업데이트되고 끝 시간을 저장하는 변수가 올바르게 업데이트되지만 끝 시간을 표시하는 입력 필드는 업데이트되지 않으므로 다른 방법으로 처리하려고합니다. 변화.
<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()}} 다음에 여기에
은 네 개의 필드에 HTML의 "End Time"레이블은 updateEndTime() 함수에서 업데이트 할 때 시간을 올바르게 표시하지만 사용자가 수동으로 종료 시간을 편집 할 수있는 필드는 업데이트 된 종료 시간 값을 자동으로 표시하지 않습니다.