I have a UI that required dimensions to be entered for width and height.
I have 2 buttons, 1 for 'mm' and 1 for 'inches'. When these are pressed it needs to first change the active class from the default (mm) to inches (which is working).
It also has to update the field icons from 'mm' to 'inches' (which is working).
What I am struggling with is using my filter, I need it to work on-click - I already have a function in my controller that runs on-click and updates the active class on the button and field icons by updating the $scope.activeUnit = currentUnit. The filter code is 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 that runs on-click event is below:
$scope.changeUnits = function(unit) {
$scope.activeUnit = unit
console.log(unit);
// Run filter code here?
// Update all mm to inches on the view and vice versa
}
I am wanting this to run in my on-click function in my controller, and convert any dimensions on the view to inches, and then when mm is clicked to convert back the way.
Any help to get this up and running would be much appreciated.
Passing activeUnit as a parameter to the filter in template should work right? Have you tried that? changing activeUnit should update the value automatically with binding.
<span ng-bind="length | convertUnits : activeUnit"></span>
<span>{{length | convertUnits : activeUnit}}/span>
Your custom filter is missing one parameter. Also console.log after return won't work.
.filter('convertUnits', function() {
return (function (input, unit) {
----^
But you are keeping the value same in model and just changing units, it can be confusing.
value = 10
unit = mm
value = 10
unit = inches
unless you decide that value will always be in either mm or inches it can be wrong and confusing data.
May be if you can describe your original requirement things will be more clear.