Angular-UI-Bootstrap手风琴无法打开

时间:2014-09-25 03:50:41

标签: angularjs angular-ui-bootstrap

我的手风琴没有开放。我最初认为这是由于ng-view,因为报告了许多错误。我尝试了both these个{{3}}解决方案,但它看起来并不像是一个标签导致问题。我还把手风琴移到了ng-view之外,但他们仍然没有打开。

我使用bootstrap 3和angular-ui-bootstrap-tmpls.0.11.0.js

我的应用:

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>

最后是我的控制器

.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
    };

1 个答案:

答案 0 :(得分:3)

你需要绑定手风琴的is-open属性,如下所示:

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

并在您的控制器中

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

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

打开第一组(只是一个例子)和

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

关闭第一组。

祝你好运