CODEWITHSUNDEEP
javascriptjquerycssangularjs
tariq
tariq

Reputation: 2258

Adding and removing class through ng-class based on attribute value

Consider below markup. It's the case of an accordion. I have to apply different css (background color) to the one that is open. For this I wish to use ng-class directive. Now the header that is open always has the aria-expanded attribute set to true. Being false for all others.

<v-pane-header class="header ng-scope ng-isolate-scope" role="tab" tabindex="0" aria-selected="true" aria-expanded="true">

How can I accomplish this. I know how to do it with respect to any model variable etc. Note aria-expanded attribute is automatically added by the accordion plugin.

Upvotes: 2

Views: 635

Answers (1)

tariq
tariq

Reputation: 2258

I took an a very different approach to solving this issue. Instead of doing this through ng-class or any other function or method in my code, I worked on the accordion plugin itself. The accordion adds the aria-expanded attribute dynamically. So I made changes in the plugin code and applied style attribute right from where the plugin adds aria-expanded attribute. Now it's working perfectly.

function expand() {
    accordionCtrl.disable();

    paneContent.attr('aria-hidden', 'false');

    paneHeader.attr({
        'aria-selected': 'true',
        'aria-expanded': 'true',
        'style': 'background-color:#FFF0C9 !important'  // Added style here. Can add a class too though.

    });

    emitEvent('onExpand');
    // Rest of the code......

This is not an answer to my question of doing it through ng-class but nevertheless gives a possible approach to anyone trying to achieve a similar thing.

Upvotes: 0

Related Questions