I am currently working on a UI that requires users to enter dimensions for width and height.
Within the UI, there are 2 buttons available - one for 'mm' and the other for 'inches'. When either of these buttons is pressed, the active class should switch from the default (mm) to inches, which is functioning correctly.
Additionally, when either button is clicked, it should update the field icons displayed from 'mm' to 'inches', also working as intended.
My challenge lies in implementing a filter that functions on-click. I already have a function in my controller that executes on-click and updates the active class of the button and field icons by setting $scope.activeUnit = currentUnit. The code snippet for the filter is provided below:
.filter('convertUnits', function() {
return (function(unit) {
if (unit == 'inches') {
return Math.floor(input * 0.0393701);
console.log('hello-inches');
}
else if (unit == 'mm') {
return Math.floor(input / 0.0393701);
console.log('hello-mm');
}
});
})
The function responsible for handling the on-click event is outlined below:
$scope.changeUnits = function(unit) {
$scope.activeUnit = unit
console.log(unit);
// Implement filter logic here?
// Update all instances of mm to inches on the view and vice versa
}
I aim to incorporate this functionality within the on-click function in my controller, converting all dimensions on the view to inches when prompted and reverting back when switching to mm.
Your assistance in enabling this feature would be greatly appreciated.