如何使用引導程序與AngularJS一起使用？

Question

我如何使用AngularJS創建引導手風琴，我已經實現了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 
}; 
});