How to open first accordion in angular ui bootstrap with ng-repeat?

Question

Is there any option to open first accordion on the basis of ngRepeat ?

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.status = {
    isFirstOpen: true,
    oneAtATime: true
  };
  $scope.cards = [{
    "id": 1,
    "bankid": 999999,
    "type": "VISA",
    "no": "1234 5678 9012 3456",
    "from": "01/06",
    "expiry": "05/18",
    "cvv": 345,
    "name": "Kallayi Basheer Shah"
  }, {
    "id": 2,
    "bankid": 888888,
    "type": "Master",
    "no": "3456 7890 1234 5678",
    "from": "06/12",
    "expiry": "07/16",
    "cvv": 678,
    "name": "Shah Basheer"
  }, {
    "id": 3,
    "bankid": 777777,
    "type": "VISA",
    "no": "9012 3456 1234 5678",
    "from": "03/10",
    "expiry": "08/17",
    "cvv": 123,
    "name": "Basheer Shah Kallayi"
  }];
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app='myApp' ng-controller="myCtrl">
  <div class="row">
    <div class="col-md-12">
      <accordion close-others="status.oneAtATime">
        <accordion-group ng-repeat="card in cards">
          <accordion-heading><i class="glyphicon glyphicon-credit-card"></i> {{card.no}}</accordion-heading>
          <div class="row">
            <div class="col-sm-12">
              Name on card: {{card.name}}
              <br>Card type: {{card.type}}
            </div>
          </div>
        </accordion-group>
      </accordion>
    </div>
  </div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js'></script>

Answer 1

While assigning is-open to a model certainly works, if you are not planning to change the behavior dynamically, you can also fix it to the first element using

is-open="$first"

Answer 2

Yes, the angular-ui accordion has the is-open attribute which is compatible with ng-repeat.

Using $first works if all you have in your <accordion-heading> is static behavior/ content as @Icycool states in their answer.

If you wanted to make use of the changing chevrons angular-ui uses in their accordion example however, this would not work.

In order to have the first item default to open and still maintain chevron (or other content) updates, simply give the first item its own accordion group, a boolean in the scope, and refer to the 0th index like so:

accordionController.js:

$scope.isFirstOpen = true;

accordionExample.html:

<accordion-group is-open="isFirstOpen" ng-if="cards.length > 0">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{cards[0].no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                         isFirstOpen, 'glyphicon-chevron-right': !isFirstOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{cards[0].name}} <br>
        Card Type: {{cards[0].type}}
    </div>
</accordion-group>

Then, create the rest similarly, giving them their own open boolean and using the array's slice() method to refer to all the rest of the items like so:

accordionController.js:

$scope.isOpen = false;

accordionExample.html:

<accordion-group ng-repeat="card in cards.slice(1)" is-open="isOpen">
    <accordion-heading>
        <div>
            <i class="glyphicon glyphicon-credit-card"></i>
            <strong>{{card.no}}</strong>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': 
                                   isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
        </div>
    </accordion-heading>
    <div>
        Name on Card: {{card.name}} <br>
        Card Type: {{card.type}}
    </div>
</accordion-group>

---

Check out this CodePen demo to see it in action: http://codepen.io/anon/pen/JdpNgB?editors=101