在ui-Bootstrap中，Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像，但实际上这两个控件有新的含义。

先说Buttons，它是一组按钮，用来实现form表单中的单选框和复选框的功能，样式上可以自定义，功能也可以扩展，可以替代单选框和复选框。

1  2  3  4     
       5     
       6      7  8      9     10     34 35 36 37     
      
       38         
       
复选框
39         
       
Results: {
     {checkResults}}
40         
       
        41             
        Left42             
        Middle43             
        Right44         
       
45         
       
单选框
46         
       
{
     {radioModel || 'null'}}
47         
       
        48             
        Left49             
        Middle50             
        Right51         
       
52     
      
53 54 

buttons控件使用uib-btn-checkbox和uib-btn-radio指令，这两个指令可以加在<input >上，也可以加在<button>上，甚至可以加在<lable>上。

对于复选框，可以设置btn-checkbox-false和btn-checkbox-true表示复选框未选中和选中时的值（默认是false和true）。

对于单选框，一组单选框需要绑定同一个ng-model，并且使用uib-btn-radio指定单选框选中时的值。

单选框还有两个可选的属性：

属性名	默认值	备注
uncheckable		增加这个属性表示单选框选中状态下再次点击时,单选框变为未选中(单选框变成复选框了)
uib-uncheckable	null	为true时效果等于增加uncheckable属性

再说Dropdown，从外观上看似乎是表单控件<select>

但是实际上这个控件的主要功能是做导航菜单，因此在模板中使用button和ul元素的组合来表现菜单项。

1  2  3  4     
       5     
       6      7  8      9     10     15 16 17 18     
      
       19         
       
        20             
        21                 请选择 22             23             
        
         24                 
         
25                     {
     {item}}26                 
27                 
         
28                 
         
其他
29             
        
30         
       
31     
      
32 33 

具体来说，dropdown包括三部分：

1. uib-dropdown 表示当前元素是一个菜单

2. uib-dropdown-toggle 一个展开/收起菜单的按钮。这是可选的部分。

3. uib-dropdown-menu 表示具体的菜单项

uib-dropdown的属性有：

 

属性名	默认值	备注
auto-close	always	可设置的值有三个： 1 always，点击菜单后自动关闭 2 disabled，不自动关闭，使用is-open手动控制。 3 outsideClick，点击Dropdown外部的元素时关闭。
dropdown-append-to	null	将菜单项（ul部分）放在其他DOM元素中，而不是包含在uib-dropdown所在的元素中
dropdown-append-to-body	false	将菜单项（ul部分）放在body末尾，而不是包含在uib-dropdown所在的元素中
is-open	false	菜单是否展开。uib-dropdown-toggle所在的元素点击时会更改这个值。
keyboard-nav	false	是否允许方向键选择菜单
on-toggle		菜单展开或收起时触发的方法

uib-dropdown-menu可以使用template-url来自定义菜单项，比如这样：

1  2  3  4     
       5     
       6      7  8      9     10     15 16 17 18     
      
       19         
       
        20             
        21                 请选择 22             23             
        
         24             
        
25         
       
26         
       35     
      
36 37 

 其中这两个属性dropdown-append-to和dropdown-append-to-body可以将菜单项放在其他地方，这样设置其样式时会非常方便。这个用法和Datepicker Popup控件的datepicker-append-to-body属性是一样的。但是dropdown-append-to应该怎样设置才可以指定菜单项迁移到的元素，还没有找到正确的方法，这里存疑。

另外，Dropdown还可以更改全局配置uibDropdownConfig，uibDropdownConfig的属性有：

属性名	默认值	备注
appendToOpenClass	uib-dropdown-open	当菜单展开并且移至其他dom元素中时所添加的类名
openClass	open	当菜单展开时添加的类名

更改全局配置的代码：

1     

 

---

目录：

---