2015-01-21 2 views
2

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() 함수에서 업데이트 할 때 시간을 올바르게 표시하지만 사용자가 수동으로 종료 시간을 편집 할 수있는 필드는 업데이트 된 종료 시간 값을 자동으로 표시하지 않습니다.

답변

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 자신에게 매우 새로운),하지만 나는 전체 객체가 대체되지 않으면 변경이 인식되지 않는다고 생각한다.

관련 문제