通过ng-class根据属性值添加和删除类答案

【问题标题】：Adding and removing class through ng-class based on attribute value通过ng-class根据属性值添加和删除类
【发布时间】：2017-03-24 08:02:36
【问题描述】：

考虑下面的标记。这是手风琴的情况。我必须对打开的那个应用不同的 css（背景颜色）。为此，我希望使用 ng-class 指令。现在打开的标题总是将 aria-expanded 属性设置为 true。对所有其他人都是虚假的。

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

我怎样才能做到这一点。我知道如何处理任何模型变量等。注意 aria-expanded 属性是由手风琴插件自动添加的。

【问题讨论】：

我试过谷歌搜索，我可以使用 ng-class 和模型变量，如 ng-class="{'disabled-appointment': content.slots.length == 0}" 但我没有得到属性的想法
你能创建一个我们可以查看的最少代码吗？
@MuhammadUsman 这有点困难，因为手风琴是由插件构建的，并且有很多其他依赖项。
@MuhammadUsman 我希望你明白我的要求是什么。
您可以尝试使用[aria-expanded="true"] { ... }设置活动元素的样式。

标签： javascript jquery css angularjs

【解决方案1】：

我采用了一种非常不同的方法来解决这个问题。我没有通过 ng-class 或我的代码中的任何其他函数或方法来执行此操作，而是使用手风琴插件本身。手风琴动态添加aria-expanded 属性。因此，我在插件添加 aria-expanded 属性的地方对插件代码和应用样式属性进行了更改。现在它运行良好。

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......

这不是对我通过 ng-class 进行此操作的问题的答案，但它为任何试图实现类似目标的人提供了一种可能的方法。

【讨论】：