I am currently utilizing angular-ui in conjunction with my AngularJS application. One component I have on my page is an accordion (uib-accordion) element, where the content, name, and state (opened/closed) are bound to an array in the controller.
The desired behavior I am aiming for is as follows: when the tab is closed, the heading should appear gray, and when it is opened, it should display in a different color. How can I achieve this based on the value of filter.isOpened? I attempted using ng-class like so:
ng-class="{'panel-blue-heading': filter.isOpened}"
However, I was unsuccessful in implementing it. Below is a simple fiddle that may provide some insight. Thank you!
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>