1

My accordion's aren't opening up. I initially thought it was due to the ng-view as there have been many bugs reported. I tried both of these solutions but it doesn't seem like the a tag is causing the problem. I also moved the accordions outside of the ng-view and they still were not opening.

I'm using bootstrap 3 and angular-ui-bootstrap-tmpls.0.11.0.js

My App: 

angular
  .module('App', [
    'ngRoute',
    'templates',
    'ui.bootstrap.tpls',
    'ui.bootstrap',
  ])

.config(function ($routeProvider, $locationProvider) {
    $routeProvider
    .when('/doctor', {
      templateUrl: 'doctor_profile.html',
      controller: 'DoctorCtrl'
    })
 $locationProvider.html5Mode(true);
})

doctor_profile.html: 

<accordion close-others="oneAtATime">
  <accordion-group ng-repeat="doctor in doctors">

    <accordion-heading>
      <span>{{doctor.name}} </span>
    </accordion-heading>
          {{ doctor.type }}
  </accordion-group>
</accordion>

and finally my controller 

.controller('DoctorCtrl', function($scope) {
    $scope.oneAtATime = false;

    $scope.doctors = [
      {
        name: 'Dr. Bob ',
        type: 'Orthopedic Surgery',
      },
      {
        name: 'Dr. Ted',
        type: 'Pediatritian',
      }, 

    $scope.status = {
      isFirstOpen: true,
      isFirstDisabled: false
    };
Community
  • 1
  • 1
user2954587
  • 4,661
  • 6
  • 43
  • 101

1 Answers1

3

You need to bind the is-open property of the accordion as following: 

<accordion-group ng-repeat="doctor in doctors" is-open="status.isItemOpen[$index]">

and in your controller 

$scope.status = {
      isItemOpen: new Array($scope.doctors.length),
      isFirstDisabled: false
    };

$scope.status.isItemOpen[0] = true;

to open first group (just an example) and

$scope.status.isItemOpen[0] = false;

to close first group.

Best regards

Dansen
  • 166
  • 6
  • That doesn't seem to be the issue. That just opens all accordions and then you still can't close them. – user2954587 Sep 25 '14 at 13:28
  • You need to do this with one separate bound property per accordion group. You do an ng-repeat and that means every group is bound to the $scope.isFirstOpen property of your controller. Thats why they are opened all. Just changed the example. – Dansen Sep 25 '14 at 14:19