How to use bootstrap accordian with AngularJS?

Question

How can i create bootstrap accordion using AngularJS , I have implemented UI-bootstrap accordion but its not working. I am new to AngularJS any help will be appreciated. I can not use jsfiddle/plunker.

So far tried code....

boot.html

    <accordion close-others="false">
            <accordion-group heading="Process Rating" is-open="open.processRating">
                <accordion-heading>
                    <small>Process Rating<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': open.processRating, 'glyphicon-chevron-right': !status.isMetricBaseOpen}"></i></small>
                </accordion-heading>


    <div class="panel-body">
        <div role="tabpanel">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home"
                    aria-controls="home" role="tab" data-toggle="tab">Line of
                        Business Ratings</a></li>
                <li role="presentation"><a href="#profile"
                    aria-controls="profile" role="tab" data-toggle="tab">Compliance
                        Rating</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <form class="form-horizontal" role="form">
                            <div class="panel-footer">
                                <strong>Inherent Risk Ratings</strong>
                                    <button require-control-point="PRT_ADD"
                                        class="btn btn-default pull-right " type="button"
                                        ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
                                        Inherent Risk Rating</button>
                            </div>
                        <div kendo-grid="ihtRskRatingGrid"
                            options="ihtRskRatingGridOptions"></div>
                        <div class="panel-footer">
                        <strong>Process Ratings</strong>
                        </div>
                        <div kendo-grid="processRatingGrid"
                            options="processRatingGridOptions">
                            <div kendo-window="ProcessRatingWin" options="PrtWinOptions"
                                k-modal="true"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

</div>
        </accordion-group>
    </accordion>

AngularJR · Accepted Answer · 2015-05-11 22:29:17Z

2

This may help a AngularJS Accordion sample. Go to and view the Edit in Plunker example

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').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
};
});

edited May 11, 2015 at 22:29

answered May 11, 2015 at 22:12

AngularJR

2,7622 gold badges18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use bootstrap accordian with AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related