CODEWITHSUNDEEP
javascriptcssangularjsangular-ui-bootstrap
G1P
G1P

Reputation: 98

Angular - accordion - show only active group

I am using angular uib-accordion and my accordion-group is populated dynamically using ng-repeat like this

<uib-accordion id="customer-details">
<uib-accordion-group   ng-repeat="task in ctrl.results | toArray |     orderBy:ctrl.orderByFunction" ng-click="ctrl.select(task, $index)">
    <uib-accordion-heading >
    </uib-accordion-heading>
 <uib-accordion-group>

my question is how can I make this accordion to show only the active group and rest to hide completely .Also the active group needs to take the whole height of the accordion and toggling should come back to the normal state( of course toggling happens with the help of a button like + and -).

Upvotes: 0

Views: 663

Answers (2)

ojus kulkarni
ojus kulkarni

Reputation: 1907

use this :

<ul data-ui-sref-active="active" > ... </ul>

Add following method in your controller:

$scope.opened = false;
$scope.toggle = function () {
    $scope.opened = !($scope.opened);
};

Then call toggle method in html :
ng-click="toggle()"

Upvotes: 1

Calvin Belden
Calvin Belden

Reputation: 3104

You can add an ng-if directive to the repeated group element (I'm assuming each task has an active property):

<uib-accordion-group ng-repeat="task in ctrl.results | toArray | orderBy:ctrl.orderByFunction"
  ng-click="ctrl.select(task, $index)"
  ng-if="task.active">
    <uib-accordion-heading >
    </uib-accordion-heading>
<uib-accordion-group>

Here's the ng-if documentation: https://docs.angularjs.org/api/ng/directive/ngIf

Upvotes: 0

Related Questions