Question

如何使用AngularJS创建bootstrap手风琴，我已经实现了UI-bootstrap手风琴，但它不起作用。我是AngularJS的新手，任何帮助都将不胜感激。我不能使用jsfiddle / plunker。

到目前为止尝试过代码......

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>

Answer 1

这可能有助于AngularJS Accordion样本。转到并查看在Plunker中编辑示例

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

如何使用AngularJS的bootstrap手风琴？

1 个答案: