如何动态设置uib-accordion-group的样式

Question

我在Angular网站上创建了一个uib-accordion，可以获得我想要的大部分功能，动态内容会相应改变。

我无法动态设置uib-accordion-group。

<uib-accordion-group panel-class="panel-danger">
    <uib-accordion-heading>
      Accordion Heading 1

很好并且整个标题为红色/粉红色，我想根据页面上的其他变量将其更改为panel-warning或panel-info。

<uib-accordion-group panel-class="{{getPanelColor()}}">
    <uib-accordion-heading>
      Accordion Heading 1

该函数似乎被正确调用，并在其他地方进行ng-click时正确触发。

我似乎无法动态更改面板类使用的值。因此，在这种情况下，getPanelColor（）会返回面板危险＆＃39;面板信息＆＃39;或者＆＃39;面板警告＆＃39;取决于其他变量。如果我在另一个div或其正确更改的页面上打印此返回值。如果我刷新页面，则会为更改的面板组显示正确的颜色。

是否有另一种设置颜色的方法 - 我不知道手风琴组的课程是什么。我尝试使用面板更改div的颜色，但这是一个子元素，不会改变整个标题的颜色。

任何帮助非常感谢。 （如果问题不明确，我会想出一个JSFiddle）

Answer 1

如果您在panel-class发生变化并且Angular已消化更改后查看HTML，您会看到以下行：

<div class="panel panel-danger" ... panel-class="panel-default">

也就是说，class和panel-class之间存在不匹配（前者有panel-danger，而后者有panel-default）。 uib-accordion-group指令根本不处理所需方式的更改。

一种解决方法是将ng-if添加到整个组：

<uib-accordion-group ng-if="render" panel-class="{{getPanelColor()}}">

...就在您想要更改panel-class之前，暂时删除整个元素，以便Angular从头开始重新呈现它。希望以下代码解释原则：

$scope.render = true;
$scope.panelColor = 'panel-danger';

$scope.setPanelColor = function(val) {
    $scope.panelColor = val;
    $scope.render = false;
    $timeout(function () {
        $scope.render = true;
   });
};

$scope.getPanelColor = function() {
    return $scope.panelColor;
};

查看实施中的提案：http://plnkr.co/edit/XfJiPnNi1z4F9cgIVxxw?p=preview。按＆＃39;清除面板颜色，然后按

。

缺点是元素的移除会导致一些闪烁。

我添加了另一个按钮＆＃39;清除面板颜色失败＆＃39;这表明你的失败案件会发生什么。以下是按下按钮后HTML的样子，注意不匹配panel-danger与panel-default：

Answer 2

在class属性中使用插值表达式，例如：

 class="{{!ctrl.valid?'notValid':'valid'}}"