原文地址:http://www.cnblogs.com/pilixiami/p/5636218.html
在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>