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

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

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ButtonsCtrl', function ($scope) {

             $scope.singleModel = 1;

             $scope.radioModel = 'Middle';

             $scope.checkModel = {

                 left: false,

                 middle: true,

                 right: false

             };

             $scope.checkResults = [];

             $scope.$watchCollection('checkModel', function () {

                 $scope.checkResults = [];

                 angular.forEach($scope.checkModel, function (value, key) {

                     if (value) {

                         $scope.checkResults.push(key);

                     }

                 });

             });

         });

     </script>

 </head>

 <body>

     <div ng-controller="ButtonsCtrl">

         <h4>复选框</h4>

         <pre>Results: {{checkResults}}</pre>

         <div class="btn-group">

             <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>

             <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>

             <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>

         </div>

         <h4>单选框</h4>

         <pre>{{radioModel || 'null'}}</pre>

         <div class="btn-group">

             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>

             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>

             <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>

         </div>

     </div>

 </body>

 </html>

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元素的组合来表现菜单项。

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {

         });

     </script>

 </head>

 <body>

     <div ng-controller="DropdownCtrl">

         <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一项','第二项','第三项']">

             <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle >

                 请选择 <span class="caret"></span>

             </button>

             <ul class="dropdown-menu" uib-dropdown-menu  >

                 <li ng-repeat="item in dropdownItems">

                     <a href="#">{{item}}</a>

                 </li>

                 <li class="divider"></li>

                 <li ><a href="#">其他</a></li>

             </ul>

         </div>

     </div>

 </body>

 </html>

具体来说，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来自定义菜单项，比如这样：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {

         });

     </script>

 </head>

 <body>

     <div ng-controller="DropdownCtrl">

         <div class="btn-group" uib-dropdown ng-init="dropdownItems=['第一项','第二项','第三项']" >

             <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>

                 请选择 <span class="caret"></span>

             </button>

             <ul class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html">

             </ul>

         </div>

         <script type="text/ng-template" id="dropdown.html">

             <ul class="dropdown-menu" uib-dropdown-menu>

                 <li ng-repeat="item in dropdownItems">

                     <a href="#">{{item}}</a>

                 </li>

                 <li class="divider"></li>

                 <li><a href="#">其他</a></li>

             </ul>

         </script>

     </div>

 </body>

 </html>

其中这两个属性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

当菜单展开时添加的类名

更改全局配置的代码：

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap'])

             .config(['uibDropdownConfig', function (uibDropdownConfig) {

                 uibDropdownConfig.appendToOpenClass = 'class1';

                 uibDropdownConfig.openClass = 'class2';

             }])

             .controller('DropdownCtrl', function ($scope) {

         });

     </script>

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  7. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  8. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  9. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

随机推荐

  1. 让PHP开发者事半功倍的十大技巧

    如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪,但是你肯定从内心深处明白,这不是冲浪的正确选择.同样的道理也适用于PHP编程,尽管这样的类比听起来有一些古怪.我们经常听到有人 ...

  2. Gbase数据库备份与还原

    备份命令:cd D:\GeneralData\GBase\Server\bin        回车 后 : d :        回车 后: dump.exe -usysdba(u+用户名) -pbj ...

  3. 用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果

    逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...

  4. HashMap对象的深层克隆

    1.java.util.HashMap 的 clone 方法是浅层copy,clone出来的对象,仅仅是原来对象的一个引用,并且对克隆出来的对象进行操作是无效的. 下面是个例子: import jav ...

  5. OAM

    OAM -- Operation Administration and Maintenance[ˈmentənəns]. 根据运营商网络运营的实际需要,通常将网络的管理工作划分为3大类:操作(Oper ...

  6. [阅读笔记]Software optimization resources

    http://www.agner.org/optimize/#manuals 阅读笔记Optimizing software in C++   7. The efficiency of differe ...

  7. Win7全自动精简批处理_温柔处理极速修正版/暴力剩女工程测试版

    2011htpcfans 发表于 2012-5-11 http://bbs.wuyou.net/forum.php?mod=viewthread&tid=210269&highligh ...

  8. 什么是UART中的FIFO

    FIFO是先进先出缓冲区的意思,即串口接收到的数据可以先进入FIFO,不必马上进入中断服务程序接收,这样可以节省CPU时间.对于发送数据也一样可以把要发送的数据一起写入FIFO,串口控制器按照写入的顺 ...

  9. 2015-01-16 .Net 中级软件工程师 笔试题

    一 C#方面 1.请简述多线程需要考虑的主要因素 答:1.线程管理 同一核上的两个线程不会以两倍的时长完成,可能需要用两倍再加10 %左右的时间来完成.与一个线程相比较的话,三个线程在同一核上想占用1 ...

  10. 听着好像很牛的特效——幽灵按钮DOM

    给大家分享一个听着好像很牛的东西——幽灵按钮,这个玩意对于艺术设计细胞在高中决定不在考试试卷上画画的我来说,实在不感冒.但是这个按钮的设计元素很流行,一个网页东西不做几个,光放上几个按钮就会显得很高端 ...