css - Angular CSS Accordion 标题

Question

我有一个 Accordion 需要根据传递给它的值更改标题背景的颜色。例如红色或绿色。
在下面的示例中，每个商店名称都有一个标题行。如果商店停业，我需要将标题的背景标记为红色而不是绿色。我无法让它工作。

   <accordion id="accordion1" close-others="true">
  <accordion-group is-open="isopen"  ng-repeat="store in stores">
       <accordion-heading class="container-fluid heading-highlight">
       {{store.StoreName}}
       </accordion-heading>
    <form name="form">
      <div class="form-row" ng-repeat="record in store.records">
       <table>
          <tr ng-formfield></tr>  //dynamic form directive
       </table>
     </div>
    </form>
  </accordion-group>
  </accordion>

我尝试使用以下指令，但无论我做什么更改都不起作用。

app.directive('headingHighlight', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs, controller) {
            $scope.$watch(element.children(), function () {
                var children = element.children('.panel-heading');
                for (var i = 0; i < children.length; i++) {

                        angular.element(children[i]).css('background', 'red');

                }
            });
        }
    };
});

Answer 1

工作指令如下:

app.directive('headingHighlight', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs, controller) {

                scope.$watch(element, function () {        
                    if (scope.color.Highlight != null) {
                            var panelhead = element.children('.panel-heading');
                            panelhead.css({
                                'background-image': '-webkit-linear-gradient(top,' + scope.color.Highlight +
                                ' 0%,  #e8e8e8 100%)', 'background-repeat': 'repeat-x', 'height': '85px;'
                            });
                        }

                });

            }
        };
    });