Search code examples
angularjsangularjs-ng-repeataccordionshow-hide

Angularjs - How to show by default first tab of accordion in ng-repeat

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default" ng-repeat="x in records">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion"  ng-click="showCompAcc=!showCompAcc" showtab="">{{x.Name}}</a>
        </h4>
      </div>
      <div  ng-hide="showCompAcc" class="panel-collapse collapse ">
        <div class="panel-body">dfdfdfd</div>
      </div>
    </div>
  </div> 
</div>
  </body>
  </html>

This is snippet of accordion with ng-repeat data.Currently It showing all tabs. What I want is by default it should show only first tab open and on click of other tab it should get display other tab details and hide the default tab details.

Solution

  • You can use uib-accordion provided by angular ui bootstrap

    Angular ui accordion

    $scope.groups = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany",
      "open" : true
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden",
      "open": false
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico",
      "open" : false
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria",
      "open" : false
    }
  ]

    HTML

        <uib-accordion close-others="true"> 
     <div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open">

     {{group.Country}}
     </div>
   </uib-accordion>

    Here is plunker for this. Plunker

    Check it out