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

Question

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

我在动态设置 uib-accordion-group 样式时遇到问题。

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

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

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

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

我似乎无法更改 panel-class 动态使用的值。因此在本例中，getPanelColor() returns 'panel-danger'、'panel-info' 或 'panel-warning' 取决于其他变量。如果我将此 return 值打印在另一个 div 页面上或它正确更改的任何内容。如果我刷新页面，则会显示更改后 panel-group.

的正确颜色

是否有另一种设置颜色的方法 - 我不知道类是什么 accordion-group。我曾尝试使用面板更改 div 的颜色，但这是一个 child 元素，不会更改整个标题的颜色。

非常感谢任何帮助。（如果问题不清楚我会想出一个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。按 'Clear panel color OK'.

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

我添加了另一个按钮 'Clear panel color FAIL'，它显示了失败案例中发生的情况。这是按下按钮后 HTML 的样子，请注意不匹配 panel-danger 与 panel-default:

Answer 2

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

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

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

How do I dynamically style uib-accordion-group

angularjs

angular-ui-bootstrap