I take everything from the example page. in principle, there is nothing else, the controller and the html body are a clean copy of the paste from the example accordion from https://angular-ui.imtqy.com/bootstrap/
I tried everything ...
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap-theme.min.css"> <script src="../../bower_components/angular/angular.min.js"></script> <script src="../../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="../../bower_components/angular-animate/angular-animate.min.js"></script> <script> var app = angular.module('app',['ui.bootstrap']); app.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 - 2' } ]; $scope.items = ['Item 1', 'Item 2', 'Item 3']; $scope.addItem = function() { var newItemNo = $scope.items.length + 1; $scope.items.push('Item ' + newItemNo); }; $scope.status = { isFirstOpen: true, isFirstDisabled: false }; }); </script> </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 collapse" uib-collapse="!isOpen"> <div class="panel-body" style="text-align: right" ng-transclude></div> </div> </div> </script> <p> <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button> <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button> </p> <div class="checkbox"> <label> <input type="checkbox" ng-model="oneAtATime"> Open only one at a time </label> </div> <uib-accordion close-others="oneAtATime"> <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> This content is straight in the template. </uib-accordion-group> <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} </uib-accordion-group> <uib-accordion-group heading="Dynamic Body Content"> <p>The body of the uib-accordion group grows to fit the contents</p> <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> <div ng-repeat="item in items">{{item}}</div> </uib-accordion-group> <uib-accordion-group heading="Custom template" template-url="group-template.html"> Hello </uib-accordion-group> <uib-accordion-group heading="Delete account" panel-class="panel-danger"> <p>Please, to delete your account, click the button below</p> <button class="btn btn-danger">Delete</button> </uib-accordion-group> <uib-accordion-group is-open="status.open"> <uib-accordion-heading> I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </uib-accordion-heading> This is just some content to illustrate fancy headings. </uib-accordion-group> </uib-accordion> </div>
`` ``
in addition I add the baurina dependency:
"dependencies": { "angular": "~1.4.6", "angular-bootstrap": "~0.13.4", "angular-route": "~1.4.6", "bootstrap": "~3.3.5", "jquery": "~2.1.4", "lodash": "~3.10.1", "angular-bootstrap-switch": "~0.4.1", "angularjs-slider": "~0.1.35", "angular-animate": "~1.4.7", "angular-ui-notification": "~0.0.14" }
source share