Currently, I am encountering an issue with my custom filter in AngularJS 1.2.22 on IE9. Interestingly, the filter works perfectly fine on Chrome and Firefox, but unfortunately not on the browser that is essential for me.
The problem lies within two filters inside an <i> tag: one filter successfully returns a font awesome icon name while the other fails to provide a color style.
Below is my HTML code:
<td>
<i tooltip="{{d.Validation}}" class='fa {{d.StatusIndicator | statusIcon}}'
style="color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em;"></i>
</td>
Here is the source code for my filters:
app.filter('statusIcon', function() {
return function(item) {
switch (item) {
case 'Y':
return "fa-exclamation-circle";
case 'R':
return "fa-exclamation-triangle";
case 'G':
return "fa-check-circle";
default:
return "";
}
};
});
app.filter('statusIconColor', function() {
return function(item) {
switch (item) {
case 'Y':
return "#B2B200";
case 'R':
return "red";
case 'G':
return "green";
default:
return "green";
}
};
});
On inspecting the dev tools in Firefox and IE, it is evident that the 'color' style renders properly in Firefox, but not at all in IE. Furthermore, breakpoints hit in the 'statusIconColor' filter in Firefox only, indicating that the filter does not even get invoked in IE.
A breakpoint set in the 'statusIcon' filter hits in both browsers, however, no luck with 'statusIconColor'. Quite peculiar!
As of now, there are no console error messages appearing.
I would highly appreciate any advice regarding this matter. -Corey.