CODEWITHSUNDEEP
javascriptangularjsangular-ui
pathrider
pathrider

Reputation: 1005

angularjs filter not executing in IE9

I'm running AngularJS 1.2.22 and I seem to be having trouble with IE9 and a custom filter that I wrote. It works fine in Chrome and Firefox, but ,of course, not the browser I really need.

I have two filters in an <i> tag: one to return a font awesome icon name and the other to provide a color style. The problem is that one filter runs okay which gives me the icon name, but not the other, which gives me color.

Here's my HTML

<td>
    <i tooltip="{{d.Validation}}" class='fa {{d.StatusIndicator | statusIcon}}'
        style="color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em;"></i>
</td>

And my filter source:

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";
        }
    };
});

When I open dev tools on Firefox and IE, I can see the 'color' style rendered properly in Firefox, but there is no 'color' style at all in IE. I see breakpoint hits in the 'statusIconColor' filter in Firefox, but not in IE which is what led me to believe the filter isn't even being invoked in IE.

A breakpoint in the the 'statusIcon' filter hits in both browsers, but not in 'statusIconColor'. Wierd!

And there are no console error messages.

I'd appreciate any advice. Corey.

Upvotes: 1

Views: 230

Answers (1)

dfsq
dfsq

Reputation: 193301

This is exactly the case when you should use ngAttrStyle directive:

ng-attr-style="color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em;"

However I would use ngStyle better and avoid filters for this purpose. You can use controller functions instead.

Apparently IE applies these styles color: {{d.StatusIndicator | statusIconColor}}; font-size: 1.25em; literally, so ngAttrStyle directive sets style attribute only after it's interpolated.

Upvotes: 1

Related Questions