How to make new / last element in accordion automatically expanded in AngularJs?

0
votes

I use accordion in my angularjs project.

Here is template:

<uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups" 
                         ng-class-odd="'panel-info'"  ng-class-even="'panel-success'">
      {{group.content}}
    </uib-accordion-group>
    <hr />
    <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
</uib-accordion>

Here is controller:

  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 3',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 4',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 5',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.item = {
      title: 'Dynamic Group Header - The new!!!',
      content: 'Dynamic Group Body - 20'
    } 

  $scope.addItem = function() {
    $scope.groups.push($scope.item);
  };

Here is a working Plunker.

On html template I have button Add Item when the button is clicked new item has been added and displayed in accordion.

When the new item is added to accordion I need it to be automatically expanded (opened). Any idea how can I achieve it? How can I make the the new added item automatically expanded?

2
javascriptangularjsangular-ui-bootstrapangular-ui
Did you tried my answer? – Mohit Tanwani

2 Answers

0
votes

uib-accordion-group provides you with a parameter is-open. You can just feed in a truthy value for newly created elements and they will be automatically opened.

See the documentation for reference: https://angular-ui.github.io/bootstrap/#/accordion

0
votes

You can try this solution, that may helps you.

is-open="$last" this will expands last accordion, I've used to show last accordion opened.

is-open="$first" this will expands first accordion.

You can use this

is-open

parameter as per your need.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 3',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 4',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 5',
      content: 'Dynamic Group Body - 2'
    }
  ];
  


  $scope.item = {
      title: 'Dynamic Group Header - The new!!!',
      content: 'Dynamic Group Body - 20'
    } 
    

  $scope.addItem = function() {
    $scope.groups.push($scope.item);
    
    $scope.isOpen = true;
  };

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse in collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

 <div class="container">
    <div id="accordionWrapper">
        <uib-accordion close-others="true">
            <!-- All Remaining Groups -->
        </uib-accordion>
    </div>
</div> 
<uib-accordion close-others="oneAtATime">

    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups track by $index" 
                         ng-class-odd="'panel-info'"  ng-class-even="'panel-success'" is-open="$last">
      {{group.content}}
    </uib-accordion-group>
    <hr />
    <button class="btn btn-default btn-sm" ng-click="addItem()">ADD</button>

  </uib-accordion>
</div>
  </body>
</html>