原文地址：

Accordion手风琴控件使用uib-accordion和uib-accordion-group指令。

 

 

                 
      
                       内容...            
      
     

效果为：

uib-accordion的属性:

属性名称	默认值	说明
close-others	true	展开一个面板时是否关闭其他面板
template-url	template/accordion/accordion.html	在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称

 

uib-accordion-group的属性:

属性名称	默认值	说明
heading	none	面板头部的标题
is-disabled	false	面板是否禁用
is-open	false	面板是否展开
panel-class	panel-default	可以使用Bootstrap的样式,如panel-primary, panel-success, panel-info,panel-warning,panel-danger等。必须为字符串。
template-url	uib/template/accordion/accordion-group.html	在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称

上例中的uib-accordion-group标题和内容都是直接写在视图中的，除此之外，uib-accordion-group还有其他几种使用方式：

1. 配合ng-repeat生成面板

 

$scope.groups = [              {                  title: '第一个面板',                  content: '第一个面板的内容'              },              {                  title: '第二个面板',                  content: '第二个面板的内容'              }            ];

 

     
                      {
    {group.content}}
     

效果为：

2. 面板中可以包含动态生成的内容

 

$scope.items = ['Item 1', 'Item 2', 'Item 3'];$scope.addItem = function () {      var newItemNo = $scope.items.length + 1;      $scope.items.push('Item ' + newItemNo); };

 

                     
      Add Item                
      
       {
   {item}}
      
     

效果为：

 

点击Add Item按钮后，面板的内容增加了，面板的大小也会变化，适应新的内容。

3. 使用自定义模板

uib-accordion-group默认的模板是uib/template /accordion/accordion-group.html，模板内容包含在ui-bootstrap-tpls-1.3.2.js文件中，可以参 考原生的模板内容写一个自定义模板，然后用template-url来引用。

例：

 

 

     
      Hello
     

4. 使用自定义的面板标题

如果面板的标题是简单的文本，使用heading属性就足够了。如果是复杂的内容，比如有图标，那么可以使用uib-accordion-heading

 

          
      
                自定义的面板标题 
            
           内容...
     

 

效果为：

在实际使用中，如果想在点击每个面板标题时就展开控件，而不是点击文字才展开，那么加入这个样式：

 

.accordion-toggle { display: block; }

 

如果想在面板标题中加入可点击的元素（按钮，复选框等），并且点击这些元素时不展开控件，那么要在这些元素上阻止事件冒泡：

 

ng-click="$event.stopPropagation()"

 

最后，贴上完整的代码：

 

    
         
                         
     
        
              
      
            
                                       同一时间只展开一个面板                    
      
        
                  
       
                        内容...            
                   
       
                        {
    {group.content}}            
                   
                       
        Add Item                
        
         {
   {item}}
        
            
                   
       
                        Hello            
                   
       
                        注意面板的颜色            
                   
                       
        
                             自定义的面板标题 
                         
                        内容...