使用 uib-accordion 的条件标题颜色

Posted 2023-03-06

【中文标题】使用 uib-accordion 的条件标题颜色

【英文标题】：Conditional heading color using uib-accordion

【发布时间】：2018-08-20 11:31:58

【问题描述】：

我在我的 angularjs 应用程序中使用 angular-ui。我的页面上有一个手风琴 (uib-accordion) 元素。它的内容、名称和状态（打开/关闭）绑定到控制器中的数组。

我想实现以下行为：当标签关闭时，标题应该是灰色的。当它打开时，它应该是另一种颜色。根据 filter.isOpened 的值，我该怎么做？我尝试使用 ng-class 类似的东西：

 ng-class="'panel-blue-heading': filter.isOpened"

但我没能做到。下面是一个简单的小提琴，也许它有帮助。 谢谢！

var app = angular.module("myApp", ['ui.bootstrap']);
app.controller('testCtrl', ['$scope', function($scope) 
  $scope.filtersInfo = [
    filterParams: [1, 2, 3, 4],
    filterName: "testFilter",
    isOpened: true
  ];
]);

.panel-default 
  border: 0;


.panel-group 
  margin-bottom: 5px;


.panel-body 
  padding: 5px;


.panel-default >.panel-heading 
  color: black;


.panel-blue-heading >.panel-heading 
  background-color: #42c6eb;
  color: black;


.container 
  padding: 10px;
  border-radius: 15px;
  border: 1px solid black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="testCtrl" class="container">
    <div ng-repeat="filter in filtersInfo">
      <uib-accordion close-others="oneAtATime">
        <div is-open="filter.isOpened" uib-accordion-group              class="panel-default">
          <uib-accordion-heading>
             filter.filterName 
          </uib-accordion-heading>

          <div>
            ...MY CONTENT...
          </div
        </div>
      </uib-accordion>
    </div>
  </div>
</div>

【问题讨论】：

是filter.isOpen 还是filter.isOpened？请确保您没有拼写错误。

@Izagkaretos，这是小提琴中的错字，我删除了一些内容，因为实际内容更大。

【参考方案1】：

你快到了：

<uib-accordion close-others="oneAtATime" ng-class="'opened': filter.isOpened" id="my-accordion">

然后在您的 CSS 中，定位由指令创建的 .panel-heading：

#my-accordion.opened .panel-heading 
  background-color: blue;

我添加 ID 是为了不影响任何其他不打算具有蓝色背景的面板标题。

var app = angular.module("myApp", ['ui.bootstrap']);
app.controller('testCtrl', ['$scope', function($scope) 
  $scope.filtersInfo = [
    filterParams: [1, 2, 3, 4],
    filterName: "testFilter",
    isOpened: true
  ];
]);

#my-accordion.opened .panel-heading 
  background-color: blue;


.panel-default 
  border: 0;


.panel-group 
  margin-bottom: 5px;


.panel-body 
  padding: 5px;


.panel-default >.panel-heading 
  color: black;


.panel-blue-heading >.panel-heading 
  background-color: #42c6eb;
  color: black;


.container 
  padding: 10px;
  border-radius: 15px;
  border: 1px solid black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="testCtrl" class="container">
    <div ng-repeat="filter in filtersInfo">
      <uib-accordion close-others="oneAtATime" ng-class="'opened': filter.isOpened" id="my-accordion">
        <div is-open="filter.isOpened" uib-accordion-group              class="panel-default">
          <uib-accordion-heading>
             filter.filterName 
          </uib-accordion-heading>

          <div>
            ...MY CONTENT...
          </div
        </div>
      </uib-accordion>
    </div>
  </div>
</div>

【讨论】：

是的，我非常接近。感谢您的解决方案，它工作得很好。