I have an issue in firefox (tested and works in chrome and IE) whereby a custom filter is not functioning. Here is the repeated template:
<img src="/Images/blank.gif" ng-class="a.VolunteerStatus | classSwitch:{1:'icon assignment_status assignment_empty',2:'icon assignment_status assignment_inactive',3:'icon assignment_status assignment_unverified',4:'icon assignment_status assignment_verified'}" ng-click="toggleVolunteerStatus(a)" title="" />
This basically is an image with a css class that switches based on the underlying status. Here is the filter in my module:
departmentModule.filter('classSwitch', function () {
return function (input, map) {
return map[input] || '';
};
});
Firefox shows no bugs in the console, but the filter in firefox ALWAYS returns the 2nd switch regardless of the underlying data. So ALL the elements have class:icon assignment_status assignment_inactive
If it helps, here is the element rendered in Firefox:
<img class="icon assignment_status assignment_inactive" src="/Images/blank.gif" ng-class="a.VolunteerStatus | classSwitch:{1:'icon assignment_status assignment_empty',2:'icon assignment_status assignment_inactive',3:'icon assignment_status assignment_unverified',4:'icon assignment_status assignment_verified'}" ng-click="toggleVolunteerStatus(a)" title="">
See plunker here courtesy of Marck.
Any ideas fellow developers? Your time reading this is much appreciated.
Thanks.