AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown
在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的更多相关文章
- Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...
- Ionic4.x 中的 UI 组件(UI Components) 日期组件
1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
- 挂号平台首页开发（UI组件部分）
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
- AngularJs的UI组件ui-Bootstrap分享（一）
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
- AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel
Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...
- AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar
进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...
- AngularJs的UI组件ui-Bootstrap分享（十二）——Rating
Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...
随机推荐
- 参考__Larvel
环境搭建 Vagrant PSR规范 PHP 标准规范(中文版)PHP 标准规范(Github版)PHP 标准规范官网 社区 laravel-china官网Larvel学院
- linux下的nodejs安装
linux下安装nodejs的方式: 1.源码安装 2.nvm安装 这里推荐使用nvm安装,避免下载nodejs源码: 安装步骤: 一.安装git 一般linux系统的git版本 ...
- java中String对象的split方法
在java.lang包中有String.split()方法,返回是一个String[]数组,今天碰到一个自己没注意的问题: 1.特殊分隔符 String str1 = "123|456|78 ...
- 无法删除对象 '产品'，因为该对象正由一个 FOREIGN KEY 约束引用。
在删除northwindcs表时,发生报错,消息 3726,级别 16,状态 1,第 2 行,无法删除对象 '产品',因为该对象正由一个 FOREIGN KEY 约束引用.此时判断是因为有其他表的外键 ...
- unity自带寻路Navmesh入门教程（一）
说明:从今天开始,我阿赵打算写一些简单的教程,方便自己日后回顾,或者方便刚入门的朋友学习.水平有限请勿见怪.不过请尊重码字截图录屏的劳动,如需转载请先告诉我.谢谢! unity自从3.5版本之后,增加 ...
- contiki-rtimer
struct rtimer { rtimer_clock_t time; rtimer_callback_t func; void *ptr; }; typedef unsigned short rt ...
- Sprint 2
成员 团队贡献分 许佳仪 22 柯晓君 23 卓宇靖 18 赖文亮 17 浏览书籍 查询书籍(可分别按照图书名和价格进行查询)
- Unity3D 中的3种坐标系
Unity3D Script API : Camera 若干文章: 1.Screen VS Viewport What is the difference 2.Screen,Viewport有什麽區別 ...
- 许愿墙的搭建（基于Apache+php+mysql）
一.准备部分:CentOS 7 , Linux 文本 各自配置好环境 二. CentOS 7准备如下: yum install httpd -y #安装httpd yum install php ...
- ArcGIS Add-in插件开发从0到1及实际案例分享
同学做毕设,要求我帮着写个ArcGIS插件,实现功能为:遍历所有图斑,提取相邻图斑的公共边长及其他属性(包括相邻图斑的ID),链接到属性表中.搞定后在这里做个记录.本文分两大部分: ArcGIS插件开 ...