When receiving an integer indicating a duration in minutes, I want to display it as hours or days if it exceeds a certain value. The ng-model should still keep the value in minutes so that any user changes are reflected accurately.
For example: Reading '480 minutes' should display as 8 (hours). Reading '1440 minutes' should show as 1 (day). If the user converts that to 0.5 (day), the ng-model value should be 720 minutes.
I prefer to have the numerical part in an input field with the measurement unit (minutes/hours/days) in a label beside it.
A 'duration' filter has been created for this purpose:
myApp.filter('duration', function() {
//Converts minutes into hours
return function(minutes) {
var hours = Math.floor(minutes / 60);
return hours;
}
});
However, when applied to the following element:
...iterating through fields, where textField is the current iteration object
<input type="number" class="text-input" ng-model="textField.CustomFieldValue | duration">
An error message appears in the console:
[ngModel:nonassign] Expression 'textField.CustomFieldValue | duration' is non-assignable. Element: <input type="number" class="text-input ng-pristine ng-untouched ng-valid" ng-model="textField.CustomFieldValue | duration">
Though my filter needs refinement, it does work as intended. The concern lies with the error message in the console.