CODEWITHSUNDEEP
javascriptangularjsangular-ngmodelionic-framework
MichaelCPG
MichaelCPG

Reputation: 125

Angularjs ng-model value not updating in view when modified by another function

I'm creating a payroll app using AngularJS which contains a page where the user is able to edit start time and end time fields for a job as well as being able to change the end time by modifying another two fields (hours and minutes) which refer to the length of time worked on the job.

So far, I've been able to make the hours and minutes fields automatically update correctly when the user changes the start time or end time fields with the use of ng-change. I'm now trying to do things the other way around so that the end time is automatically updated based on the hours and minutes fields and although the variable which stores the end time is correctly updated, the input field displaying the end time doesn't change.

Here's the HTML for the four fields:

        <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>

And the relevant code from the updateEndTime() function:

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

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

{{data.endTimeObject.getHours()}} next to the "End Time" label displays the hours correctly when updated from the updateEndTime() function but the field where the user can manually edit the end time doesn't automatically show the updated end time value.

Upvotes: 2

Views: 937

Answers (1)

Andreas Fl&#246;jt
Andreas Fl&#246;jt

Reputation: 349

Don't know if you are still having this problem, but maybe somebody else stumbles across this. Updating the date object using setSeconds worked for the object itself (I could output it in a toast), but input field wouldn't display the new value.

In the end, what I had to do was to set a brand new date object, not just using functions. In your case, maybe you could do something like

$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;
}

If needed, you can probably reuse values from the old date object in the new one.

Why this works I don't quite know (very new to AngularJS myself), but I would guess that the change is not recognized unless the entire object is replaced.

Upvotes: 1

Related Questions