代码之家 › 专栏 › 技术社区 › Adrian Pop

使用uib手风琴的条件标题颜色

angular-ui-bootstrap twitter-bootstrap angularjs css javascript

Adrian Pop · 技术社区 · 7 年前

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

我想实现以下行为:关闭选项卡时,标题应为灰色。当它被打开时,它应该是另一种颜色。根据filter的值,我如何才能做到这一点。isOpened?我尝试了ng类,比如:

 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>

1 回复 | 直到 7 年前

Pop-A-Stash 7 年前

你就快到了:

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